three.js 几何体-组合网格_ThreeJS 粒子系统实现雪花飘落动画

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. 示例

飘雪动效示例