基于粒子（Points）模拟雨雪天气效果

目录

功能描述

最终效果

准备工作

实现原理

参数配置

核心代码

---

功能描述

        在基于THREE.js的场景中，实现雨雪天气效果，可设置下雨、雪的范围、位置、量级以及下落速度。

最终效果

雪

   

雨

准备工作

        材质贴图，包含雨点、雪花、环境球贴图，其中环境球贴图可有可无，如不用环境球，直接忽略即可。

实现原理

        雨和雪的原理是一样的，仅仅是材质贴图和下落速度不一样。

        在某一个确定的空间范围内，随机生成N个三维坐标点。这个范围可以是球体，也可以是六面体，本例使用的是六面体。另外，N越大，雨雪的密度就越大，通过调整N，可以修改雨雪等级。

/**
 * 指定尺寸六面体内，随机生成三维向量
 * @param width
 * @param height
 * @param depth
 * @returns {THREE.Vector3}
 */
export function randomVectorInBox (width, height, depth) {
  const x = random(-width / 2, width / 2)
  const y = random(-height / 2, height / 2)
  const z = random(-depth / 2, depth / 2)

  return new THREE.Vector3(x, y, z)
}

// 向量坐标集合
const vectors = []

// 循环生成向量
for (let i = 0; i < N; i++) {
  const v = randomVectorInBox(4000, 4000, 4000)
  vectors.push(v.x, v.y, v.z)
}      

        创建一个BufferGeometry，将这N个坐标点以Float32BufferAttribute的形式，放入BufferGeometry的position属性中。

      然后创建一个PointsMaterial材质，贴图就是雨或雪的贴图图片，这里的图片一定是png格式，否则你的雪花或者雨点会有棱有角非常难看。在设置下材质的透明度。

        最后通过上述创建的几何体和材质对象，创建Points对象，添加到场景，这样我们就到了一个静止状态的雨雪效果。

const geometry = new THREE.BufferGeometry()
// 设置position
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vectors, 3))

// 加载材质贴图
const texture = new THREE.TextureLoader().load(img)

// 创建材质
const materials = new THREE.PointsMaterial({
  size: size,