这篇博客介绍了如何使用ThreeJs的Sprite类创建面向相机的粒子动画，模拟花瓣飘落并添加翻转效果。通过生成随机数来设置粒子的位置、大小和速度，以及在渲染过程中动态改变粒子的形状以模拟翻转。当粒子超出屏幕范围时，重新设定其位置，确保飘落效果的连贯性。
粒子动画在ThreeJs可以用几种方式实现
本次样例使用Sprite类来构建粒子
大概意思：这个类创建的对象是一个始终面向相机的平面，可以把贴图应用在上面，Sprite对象无法添加阴影 ，所以castShadow属性无效
首先我们创建场景和相机
然后用Sprite创建粒子
生成随机数，随机获取贴图资源，使用Sprite类创建粒子
使用随机数给粒子设置位置，大小
因为Sprite类是创建一个始终面向相机的面，也就是说它无法使用翻转使得花瓣有个翻转的效果。
但是我需要给花瓣添加一个翻转的效果
我的实现思路是，2d元素在反转时其实相当于是将他的x轴的大小压缩
所以我给设置一个当前x轴的大小
和初始变形速度
以下是所有粒子初始化的代码
创建完粒子后
创建canvasRender
因为准备让花瓣从左上方往右下飘落，所以每次渲染画面的时候需要将花瓣往右下偏移
这个速度是我在创建粒子时随机生成的，为的是让花瓣每一片的速度不同
给y轴上也在每次渲染的时候增加一个偏移量，
因为这个效果需要在竖屏上展示，
所以y轴速度比x轴快一些效果会更好
然后对粒子的形状在每次渲染的时候增加一个变形量
需要模拟花瓣翻转的效果，当当前变形量超过原先尺寸时，变形方向改为相反方向(本来变大改为变小)
到这里我们就完成了粒子的飘落+翻转的动态。
我们还需要在粒子超出效果展示区域时，把粒子重新赋予一个初始位置
这样，飘花瓣的效果，
就完成了
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
