three.js 粒子特效

需求描述

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

效果

实现步骤

1.创建粒子

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

材质

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

位置

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

点类

2.粒子运动动画

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

无规则运动

3.粒子形状变换

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

形状变换


变换后

你可能感兴趣的:(three.js 粒子特效)