three.js实现雪花场景效果

点击获取雪花图片素材

提取码:lywa

// 雪花效果
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]);
        }
    }
}

结果