three.js实现雪花场景效果

点击获取雪花图片素材

提取码:lywa

javascript 复制代码
// 雪花效果
import * as THREE from "three"
export function getsnowEffect(th) {
    console.log('th', th) // this 场景
    var that = th
    // 创建一个BufferGeometry对象,用于存储顶点数据  
    const geometry = new THREE.BufferGeometry();
    const vertices = [];
    let renderer;
    // 创建一个纹理加载器  
    const textureLoader = new THREE.TextureLoader();

    // 加载五个不同的雪花纹理  
    const sprite1 = textureLoader.load('/public/data/snowflake1.png');
    const sprite2 = textureLoader.load('/public/data/snowflake2.png');
    const sprite3 = textureLoader.load('/public/data/snowflake3.png');
    const sprite4 = textureLoader.load('/public/data/snowflake4.png');
    const sprite5 = textureLoader.load('/public/data/snowflake5.png');

    // 生成10000个随机顶点位置  
    for (let i = 0; i < 10000; i++) {
        const x = Math.random() * 2000 - 1000;
        const y = Math.random() * 2000 - 1000;
        const z = Math.random() * 2000 - 1000;
        vertices.push(x, y, z);
    }

    // 将顶点数据设置为BufferGeometry的属性  
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

    // 定义一个参数数组,包含颜色、纹理和大小 
    let parameters = [
        [
            [1.0, 0.2, 0.5], sprite2, 5
        ],
        [
            [0.95, 0.1, 0.5], sprite3, 5
        ],
        [
            [0.90, 0.05, 0.5], sprite1, 5
        ],
        [
            [0.85, 0, 0.5], sprite5, 5
        ],
        [
            [0.80, 0, 0.5], sprite4, 5
        ]
    ];
    const materials = [];
    // 根据参数数组创建多个粒子系统,并将它们添加到场景中
    for (let i = 0; i < parameters.length; i++) {
        const color = parameters[i][0];
        const sprite = parameters[i][1];
        const size = parameters[i][2];
        // 创建一个PointsMaterial,设置其大小、纹理、混合模式等属性  
        materials[i] = new THREE.PointsMaterial({
            size: size,
            map: sprite,
            blending: THREE.AdditiveBlending,
            depthTest: false,
            transparent: true
        });
        materials[i].color.setHSL(color[0], color[1], color[2]);
        // 创建一个Points对象,并使用之前定义的geometry和material 
        const particles = new THREE.Points(geometry, materials[i]);
        // 为粒子系统设置随机的旋转值  
        particles.rotation.x = Math.random() * 6;
        particles.rotation.y = Math.random() * 6;
        particles.rotation.z = Math.random() * 6;
        // 将粒子系统添加到场景中
        that.scene.add(particles);
    }
    // 这里应该初始化renderer,并设置其大小和dom元素  
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    animate();

    function animate() {
        requestAnimationFrame(animate);
        render();
    }

    function render() {
        const time = Date.now() * 0.00005;
        for (let i = 0; i < that.scene.children.length; i++) {
            const object = that.scene.children[i];
            if (object instanceof THREE.Points) {

                object.rotation.y = time * (i < 4 ? i + 1 : -(i + 1));
            }
        }

        for (let i = 0; i < materials.length; i++) {
            const color = parameters[i][0];
            const h = (360 * (color[0] + time) % 360) / 360;
            materials[i].color.setHSL(h, color[1], color[2]);
        }
    }
}

结果

相关推荐
David凉宸1 分钟前
一文带你使用Vue完成移动端(apk)项目
前端
纪元A梦11 分钟前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
钢铁男儿13 分钟前
C# 深入理解类:面向对象编程的核心数据结构
开发语言·数据结构·c#
会飞的鱼先生13 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了14 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
秋天的一阵风19 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风20 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
Doker 多克38 分钟前
Python-Django系列—部件
开发语言·python
海底火旺40 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺40 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试