html页⾯飘花,HTML5开发实例-ThreeJs实现粒⼦动画飘花效
果代码分享canvas动画
粒⼦动画在ThreeJs可以⽤⼏种⽅式实现
本次样例使⽤Sprite类来构建粒⼦
⼤概意思：这个类创建的对象是⼀个始终⾯向相机的平⾯，可以把贴图应⽤在上⾯，Sprite对象⽆法添加阴影 ，所以castShadow属性⽆效⾸先我们创建场景和相机
然后⽤Sprite创建粒⼦
⽣成随机数，随机获取贴图资源，使⽤Sprite类创建粒⼦
使⽤随机数给粒⼦设置位置，⼤⼩
因为Sprite类是创建⼀个始终⾯向相机的⾯，也就是说它⽆法使⽤翻转使得花瓣有个翻转的效果。
但是我需要给花瓣添加⼀个翻转的效果
我的实现思路是，2d元素在反转时其实相当于是将他的x轴的⼤⼩压缩
所以我给设置⼀个当前x轴的⼤⼩
和初始变形速度
以下是所有粒⼦初始化的代码
创建完粒⼦后
创建canvasRender
因为准备让花瓣从左上⽅往右下飘落，所以每次渲染画⾯的时候需要将花瓣往右下偏移
这个速度是我在创建粒⼦时随机⽣成的，为的是让花瓣每⼀⽚的速度不同
给y轴上也在每次渲染的时候增加⼀个偏移量，
因为这个效果需要在竖屏上展⽰，
所以y轴速度⽐x轴快⼀些效果会更好
然后对粒⼦的形状在每次渲染的时候增加⼀个变形量
需要模拟花瓣翻转的效果，当当前变形量超过原先尺⼨时，变形⽅向改为相反⽅向(本来变⼤改为变⼩)到这⾥我们就完成了粒⼦的飘落+翻转的动态。
我们还需要在粒⼦超出效果展⽰区域时，把粒⼦重新赋予⼀个初始位置
这样，飘花瓣的效果，
就完成了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。