ThreeJS 粒子系统中,THREE.Points是用来创建点的类,也用来批量管理粒子,基于几何体的顶点来渲染每个粒子。这个类的构造函数有两个参数,geometry(几何体)和material(材质),几何体参数用来设置粒子的位置坐标,而材质参数用来设置粒子的外观。下面利用ThreeJS的粒子系统来实现雪花飘落动画。
1. 寻找素材
1) 背景图片
选择一张雪景图片作为背景图
2) 雪花图片
为了让动画效果更好,使用两种不同形状的雪花实现雪花飘落效果。
2. HTML部分
网页中添加canvas画布所在的元素
<
3. JS部分
1) 初始化渲染器、场景、摄像机
var
2) 利用平面几何体添加背景
// 平面几何体
3) 利用THREE.Points增加雪花粒子
由于使用了两种雪花形状,每一个形状需要创建一个THREE.Points对象
var
4) 利用requestAnimationFrame实现动画
(
4. 示例
飘雪动效示例