Threejs下雪效果

目的

尝试一下通过粒子系统制造下雪的效果

原理

方法一：通过BufferGeometry绘制n个点，并给点材质传下雪的贴图，渲染的时候对点进行旋转，来实现下雪的效果。

方法二：通过精灵模型Sprite也可以实现（下次一定）

实现

1、制造雪花

实现逻辑
1、创造粒子缓冲区几何体
2、创建缓冲区存储雪花的粒子
3、随机生成顶点的位置并给粒子缓冲区几何体传值
4、设置点的纹理材质（雪花贴图）
5、加入场景搞定！

//1、创造粒子缓冲区几何体
const particlesGeometry = new THREE.BufferGeometry();
const count = 10000;

//2、创建缓冲区存储雪花的粒子
const positions = new Float32Array(count * 3);

//3、随机生成顶点的位置并给粒子缓冲区几何体传值
//Math.random()生成0到小于1的值，生成-100到100的点
  for (let i = 0; i < count * 3; i++) {
    positions[i] = Math.random() * 100-100;
  }
    particlesGeometry.setAttribute(
    "position",
    new THREE.BufferAttribute(positions, 3)
  );

//4、设置点的纹理材质（雪花贴图）
  const pointsMaterial = new THREE.PointsMaterial();
  pointsMaterial.size = 0.5;
    // 载入纹理
  const textureLoader = new THREE.TextureLoader();
  const texture = textureLoader.load(`雪花.png`);
  // 设置点材质纹理
    pointsMaterial.map = texture;
    pointsMaterial.alphaMap = texture;

//5、加入场景搞定！
scene.add(points);

2、雪花动起来

  points.rotation.x += 3*Math.pow(10,-3);

实现效果