three.js 粒子特效

需求描述

通过粒子特效，实现动态背景或其它效果。

效果

实现步骤

1.创建粒子

我们使用的是Points和PointsMaterial创建粒子的，需要确定的是粒子数量、粒子颜色、透明度、是否随离相机的远近调整大小、粒子的贴图等信息。

材质

接下来根据粒子的数量，循环设置粒子的位置，并保存到定义的Geometry对象的vertices顶点队列中。

位置

最后创建点类，并添加到场景中。

点类

2.粒子运动动画

有些场景需要创建动态背景或者模仿雨雪天气，就需要让粒子无规则的运动。我们需要在创建粒子位置的时候给粒子增加一个随机的方向向量，在render循环渲染场景的函数中，改变每一个粒子的位置，并且需要更新顶点队列的数据，这样粒子才能无规则的运动。

无规则运动

3.粒子形状变换

有些场景需要粒子位置变化为另一个几何体（该几何体必须有顶点集合vertices），我们需要使用Tween平滑动画来改变每个粒子的位置，此处需要注意的是变化前后的模型顶点的数量相等和不等的情况。

形状变换

变换后