粒子动画在ThreeJs可以用几种方式实现

 

　　本次样例使用Sprite类来构建粒子

 

　　大概意思：这个类创建的对象是一个始终面向相机的平面，可以把贴图应用在上面，Sprite对象无法添加阴影 ，所以castShadow属性无效

 

　　首先我们创建场景和相机

 

　　然后用Sprite创建粒子

 

　　生成随机数，随机获取贴图资源，使用Sprite类创建粒子

 

　　使用随机数给粒子设置位置，大小

 

　　因为Sprite类是创建一个始终面向相机的面，也就是说它无法使用翻转使得花瓣有个翻转的效果。

 

　　但是我需要给花瓣添加一个翻转的效果

 

　　我的实现思路是，2d元素在反转时其实相当于是将他的x轴的大小压缩

 

　　所以我给设置一个当前x轴的大小

 

　　和初始变形速度

 

　　以下是所有粒子初始化的代码

 

　　创建完粒子后

 

　　创建canvasRender

 

　　因为准备让花瓣从左上方往右下飘落，所以每次渲染画面的时候需要将花瓣往右下偏移

 

　　这个速度是我在创建粒子时随机生成的，为的是让花瓣每一片的速度不同

 

　　给y轴上也在每次渲染的时候增加一个偏移量，

 

　　因为这个效果需要在竖屏上展示，

 

　　所以y轴速度比x轴快一些效果会更好

 

　　然后对粒子的形状在每次渲染的时候增加一个变形量

 

　　需要模拟花瓣翻转的效果，当当前变形量超过原先尺寸时，变形方向改为相反方向(本来变大改为变小)

 

　　到这里我们就完成了粒子的飘落+翻转的动态。

 

　　我们还需要在粒子超出效果展示区域时，把粒子重新赋予一个初始位置

 

　　这样，飘花瓣的效果，

 

　　就完成了