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

    目录

    功能描述

    最终效果

    准备工作

    实现原理

    参数配置

    核心代码

    功能描述

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

    最终效果

    雪

       

    雨

    准备工作

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

    实现原理

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

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

    1. /**
    2.  * 指定尺寸六面体内，随机生成三维向量
    3.  * @param width
    4.  * @param height
    5.  * @param depth
    6.  * @returns {THREE.Vector3}
    7.  */
    8. export function randomVectorInBox (width, height, depth) {
    9.   const x = random(-width / 2, width / 2)
    10.   const y = random(-height / 2, height / 2)
    11.   const z = random(-depth / 2, depth / 2)
    12.  
    13.   return new THREE.Vector3(x, y, z)
    14. }
    15.  
    16. // 向量坐标集合
    17. const vectors = []
    18.  
    19. // 循环生成向量
    20. for (let i = 0; i < N; i++) {
    21.   const v = randomVectorInBox(4000, 4000, 4000)
    22.   vectors.push(v.x, v.y, v.z)
    23. }

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

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

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

    1. const geometry = new THREE.BufferGeometry()
    2. // 设置position
    3. geometry.setAttribute('position', new THREE.Float32BufferAttribute(vectors, 3))
    4.  
    5. // 加载材质贴图
    6. const texture = new THREE.TextureLoader().load(img)
    7.  
    8. // 创建材质
    9. const materials = new THREE.PointsMaterial({
    10.   size: size,
    11.   map: texture,
    12.   blending: THREE.AdditiveBlending,
    13.   depthTest: true,
    14.   transparent: true,
    15.   opacity: 0.5
    16. })
    17.  
    18. // 创建Points粒子对象
    19. const particle = new THREE.Points(geometry, materials)

             但此时得到效果是静止的，我们需要让粒子下落来实现最终的效果，原理就是在requestAnimationFrame中，不断修改粒子的y轴坐标，实现下落，当然如果不想垂直下落，也可以同时修改其他坐标轴，来模拟风吹的效果，这里为了简单示意，就只修改y轴了。每次y轴的变化量V，决定了下落的速度。为了方便操作，我将上面生成的vectors集合，挂在了points对象上。下面是在requestAnimationFrame中每一帧刷新时执行的代码。

    1. // 循环粒子坐标点
    2. for (let i = 1; i < points.vectors.length; i += 3) {
    3.   // 修改y轴坐标，每次变化V，注意是减法，否则就上升了
    4.   points.vectors[i] = points.vectors[i] - V
    5.  
    6.   // 此处判断是为了让粒子下落到最低点后，重复从最高点继续下落，实现循环下落
    7.   if (points.vectors[i] < -height / 2) {
    8.     const v = randomVectorInBox(width, height, depth)
    9.     particle.vectors[i] = height / 2
    10.     particle.vectors[i - 1] = v.x
    11.     particle.vectors[i + 1] = v.z
    12.   }
    13. }
    14.  
    15. // 更新几何体position
    16. points.geometry.setAttribute('position', new THREE.Float32BufferAttribute(points.vectors, 3))

    参数配置

     修改V可以调整下落速度

     修改六面体尺寸，可修改粒子范围

    修改points的position，可以调整粒子整体在场景中的位置

     修改N可以调整雨雪的量级

    核心代码

            demo是在vue上跑的，尽量把与本例无关的vue代码全部清除了。

    1. // 创建场景封装对象（场景、光源等于本例无关的内容）
    2. const ts = new TS('container')
    3.  
    4. // UI控制参数对象
    5. this.controls = {
    6.   // 开启下雨
    7.   rainVisible: false,
    8.   // 雨滴四度
    9.   rainSpeed: 10,
    10.   // 雨量等级（密度）
    11.   rainGrade: 10000,
    12.   // 开启下雪
    13.   snowVisible: false,
    14.   // 雪花速度
    15.   snowSpeed: 5,
    16.   // 雪量等级（密度）
    17.   snowGrade: 10000,
    18.   // 覆盖范围-X
    19.   width: 4000,
    20.   // 覆盖范围-Y
    21.   height: 4000,
    22.   // 覆盖范围-Z
    23.   depth: 4000,
    24.   // 雨坐标
    25.   rx: 0,
    26.   ry: 0,
    27.   rz: 0,
    28.   // 雪坐标
    29.   sx: 0,
    30.   sy: 0,
    31.   sz: 0
    32. }
    33.  
    34. // 雨雪对象
    35. this.rain = null
    36. this.snow = null
    37.  
    38. // GUI 方便调试
    39. const gui = new GUI()
    40.  
    41. // 覆盖范围
    42. gui.add(this.controls, 'width', 1000, 10000).step(10).name('宽').onChange(v => {
    43.   this.controls.width = v
    44.   // 刷新几何体
    45.   updateGeometry.call(this, 'rain')
    46.   updateGeometry.call(this, 'snow')
    47. })
    48.  
    49. gui.add(this.controls, 'width', 1000, 10000).step(10).name('高').onChange(v => {
    50.   this.controls.height = v
    51.   // 刷新几何体
    52.   updateGeometry.call(this, 'rain')
    53.   updateGeometry.call(this, 'snow')
    54. })
    55.  
    56. gui.add(this.controls, 'depth', 1000, 10000).step(10).name('长').onChange(v => {
    57.   this.controls.depth = v
    58.   // 刷新几何体
    59.   updateGeometry.call(this, 'rain')
    60.   updateGeometry.call(this, 'snow')
    61. })
    62.  
    63. // 雨相关UI控制
    64. const rainGroup = gui.addFolder('雨')
    65.  
    66. rainGroup.add(this.controls, 'rainVisible', false).name('开启').onChange(v => {
    67.   this.controls.rainVisible = v
    68.  
    69.   // 创建粒子对象，否则删除并销毁
    70.   if (v) {
    71.     this.rain = generateParticle.call(this, 'img/rain.png', 'snow', 10)
    72.     ts.scene.add(this.rain)
    73.   } else {
    74.     this.rain.geometry.dispose()
    75.     this.rain.material.dispose()
    76.     this.rain.removeFromParent()
    77.     this.rain = null
    78.   }
    79. })
    80.  
    81. rainGroup.add(this.controls, 'rainSpeed', 5, 15).step(1).name('速度').onChange(v => {
    82.   this.controls.rainSpeed = v
    83. })
    84.  
    85. rainGroup.add(this.controls, 'rainGrade', 100, 200000).step(100).name('量级').onChange(v => {
    86.   this.controls.rainGrade = v
    87.  
    88.   if (!this.rain) return
    89.  
    90.   updateGeometry.call(this, 'rain')
    91. })
    92.  
    93. rainGroup.add(this.controls, 'rx').step(1).name('X坐标').onChange(v => {
    94.   this.controls.rx = v
    95.   if (this.rain) this.rain.position.x = v
    96. })
    97.  
    98. rainGroup.add(this.controls, 'ry').step(1).name('Y坐标').onChange(v => {
    99.   this.controls.ry = v
    100.   if (this.rain) this.rain.position.y = v
    101. })
    102.  
    103. rainGroup.add(this.controls, 'rz').step(1).name('Z坐标').onChange(v => {
    104.   this.controls.rz = v
    105.   if (this.rain) this.rain.position.z = v
    106. })
    107.  
    108. // 雪相关UI控制
    109. const snowGroup = gui.addFolder('雪')
    110.  
    111. snowGroup.add(this.controls, 'snowVisible', false).name('开启').onChange(v => {
    112.   this.controls.snowVisible = v
    113.  
    114.   if (v) {
    115.     this.snow = generateParticle.call(this, 'img/snow.png', 'snow')
    116.     ts.scene.add(this.snow)
    117.   } else {
    118.     this.snow.geometry.dispose()
    119.     this.snow.material.dispose()
    120.     this.snow.removeFromParent()
    121.     this.snow = null
    122.   }
    123. })
    124.  
    125. snowGroup.add(this.controls, 'snowSpeed', 1, 10).step(1).name('速度').onChange(v => {
    126.   this.controls.snowSpeed = v
    127. })
    128.  
    129. snowGroup.add(this.controls, 'snowGrade', 100, 200000).step(100).name('量级').onChange(v => {
    130.   this.controls.snowGrade = v
    131.  
    132.   if (!this.snow) return
    133.  
    134.   updateGeometry.call(this, 'snow')
    135. })
    136.  
    137. snowGroup.add(this.controls, 'sx').step(1).name('X坐标').onChange(v => {
    138.   this.controls.sx = v
    139.   if (this.snow) this.snow.position.x = v
    140. })
    141.  
    142. snowGroup.add(this.controls, 'sy').step(1).name('Y坐标').onChange(v => {
    143.   this.controls.sy = v
    144.   if (this.snow) this.snow.position.y = v
    145. })
    146.  
    147. snowGroup.add(this.controls, 'sz').step(1).name('Z坐标').onChange(v => {
    148.   this.controls.sz = v
    149.   if (this.snow) this.snow.position.z = v
    150. })
    151.  
    152. // 此处相当于requestAnimationFrame，只不过内部封装了一下
    153. ts.updates.push(() => {
    154.   update.call(this, 'rain')
    155.   update.call(this, 'snow')
    156. })
    157.  
    158. /**
    159.  * 更新几何体
    160.  * @param type
    161.  */
    162. function updateGeometry (type) {
    163.   // 获取粒子对象
    164.   const particle = this[type]
    165.   if (!particle) return
    166.   // 重新计算粒子坐标
    167.   const vectors = computeVectors.call(this, type)
    168.   // 更新属性
    169.   particle.vectors = vectors
    170.   particle.geometry.setAttribute('position', new THREE.Float32BufferAttribute(particle.vectors, 3))
    171. }
    172.  
    173. /**
    174.  * 更新粒子移动
    175.  * @param particle
    176.  * @param speed
    177.  */
    178. function update (type) {
    179.   // 获取粒子对象
    180.   const particle = this[type]
    181.   if (!particle || !particle.vectors) return
    182.   // 获取速度
    183.   const speed = this.controls[type + 'Speed']
    184.  
    185.   // 下落动画
    186.   for (let i = 1; i < particle.vectors.length; i += 3) {
    187.     particle.vectors[i] = particle.vectors[i] - speed
    188.  
    189.     if (particle.vectors[i] < -this.controls.height / 2) {
    190.       const v = randomVectorInBox(this.controls.width, this.controls.height, this.controls.depth)
    191.       particle.vectors[i] = this.controls.height / 2
    192.       particle.vectors[i - 1] = v.x
    193.       particle.vectors[i + 1] = v.z
    194.     }
    195.   }
    196.  
    197.   particle.geometry.setAttribute('position', new THREE.Float32BufferAttribute(particle.vectors, 3))
    198. }
    199.  
    200. /**
    201.  * 计算粒子坐标
    202.  * @param type
    203.  * @returns {*[]}
    204.  */
    205. function computeVectors (type) {
    206.   const vectors = []
    207.  
    208.   for (let i = 0; i < this.controls[type + 'Grade']; i++) {
    209.     // 从六面体范围内获取随机坐标
    210.     const v = randomVectorInBox(this.controls.width, this.controls.height, this.controls.depth)
    211.     vectors.push(v.x, v.y, v.z)
    212.   }
    213.  
    214.   return vectors
    215. }
    216.  
    217. /**
    218.  * 雨雪粒子
    219.  * @param img
    220.  * @param size
    221.  * @returns {any}
    222.  */
    223. function generateParticle (img, type, size = 15) {
    224.   const geometry = new THREE.BufferGeometry()
    225.   // 获取粒子坐标点集合
    226.   const vectors = computeVectors.call(this, type)
    227.   // 设置到几何体
    228.   geometry.setAttribute('position', new THREE.Float32BufferAttribute(vectors, 3))
    229.   // 加载贴图
    230.   const texture = new THREE.TextureLoader().load(img)
    231.   // 创建材质对象
    232.   const materials = new THREE.PointsMaterial({
    233.     size: size,
    234.     map: texture,
    235.     blending: THREE.AdditiveBlending,
    236.     // 是否永远置顶
    237.     depthTest: true,
    238.     transparent: true,
    239.     opacity: 0.5
    240.   })
    241.  
    242.   const particle = new THREE.Points(geometry, materials)
    243.  
    244.   particle.vectors = vectors
    245.  
    246.   return particle
    247. }
    248.  
    249. /**
    250.  * 指定尺寸六面体内，随机生成三维向量
    251.  * @param width
    252.  * @param height
    253.  * @param depth
    254.  * @returns {THREE.Vector3}
    255.  */
    256. export function randomVectorInBox (width, height, depth) {
    257.   const x = random(-width / 2, width / 2)
    258.   const y = random(-height / 2, height / 2)
    259.   const z = random(-depth / 2, depth / 2)
    260.  
    261.   return new THREE.Vector3(x, y, z)
    262. }

  • 相关阅读:
    DBeaver 与 Navicat：数据库工具对决
    valgrind笔记
    第07章 InnoDB数据存储结构
    Yarp 与 Nginx性能大比拼不出所料它胜利了！
    java面试题总结
    GreenPlum扩容节点
    Docker学习总结
    智能制造工厂中MES系统的应用发展
    Django笔记四十之运行Django环境的python脚本
    【Python】获取或修改 Windows 系统中文件的创建时间、修改时间和访问时间（os | win32file）
  • 原文地址：https://blog.csdn.net/delongcpp/article/details/125993365