一些特定模糊现象，经常使用粒子系统模拟，如火焰、爆炸等。Three.js提供了多种粒子系统，下面介绍粒子系统
一、Sprite粒子系统
使用场景：下雨、下雪、烟花
ce使用代码：
var material=new THRESS.SpriteMaterial();//创建材质
var sprite=new THRESS.Sprite(material); //创建粒子通过改变材质参数，可以增加粒子系统的显示效果，SpriteMaterial材质参数属性与描述如下所示：
属性
| 属性 | 描述 |
| color | 粒子的颜色 |
| map | 粒子的纹理 |
| sizeAnnutation | 相机的远近是否影响粒子效果 |
| opactivy | 透明度 |
| transparent | 是否透明 |
二、Sprite使用示例
此示例是分布在球面范围的粒子逐渐朝着球心位置收缩，关键代码如下：
function createSprites(){ //创建粒子
for (var x = -5; x < 5; x++) { //创建10×10个粒子
for (var y = -5; y < 5; y++) {
var material = new THREE.SpriteMaterial({color:0xff0000＊Math.
random()}); //创建粒子材质
var sprite = new THREE.Sprite(material); //创建粒子
let ad = Math.PI / 180 ＊ (360 ＊ Math.random()); //设置球坐标的角度
let bd = Math.PI / 180 ＊ (360 ＊ Math.random()); //设置球坐标的角度
sprite.position.set(40 ＊ Math.cos(ad)＊Math.cos(bd), 40 ＊
//设置粒子的位置
Math.cos(ad)＊Math.sin(bd), 40 ＊ Math.sin(ad));
pointmove(0,0,0, sprite); //启动平移滑动
scene.add(sprite); //将粒子添加进场景中
}}}
function pointmove( mx, my, mz, point) { //平滑移动动画
tween = new TWEEN.Tween( point.position ).to( { //创建Tween动画对象
x: mx, //设置移动目标点的x坐标
y: my, //设置移动目标点的y坐标
z: mz }, 3000 ) //设置移动目标点的z坐标和动画时间
.easing( TWEEN.Easing.Linear.None).start(); //播放动画
tween.repeat(Infinity); //设置动画播放方式为重复
}CreateSprite()为创建粒子的方法。在该方法中通过for循环创建了100个粒子，在创建每个粒子的时候，让粒子材质的颜色随机生成，粒子位置用球面坐标公式来创建，因此使所有粒子随机分布在一个球表面。
pointmove()行为粒子平移滑动的方法。此方法接收粒子平移最终位置点的x、y、z坐标参数和粒子对象参数，然后创建Tween动画对象，给出指定的参数（如移动目标是粒子对象），移动终点是该方法接收的3个坐标值。
三、PointCloud粒子系统
场景： 处理大量粒子，相当于粒子集合。
其具有材质CloudMaterial参数如下所示：
| 属性 | 描述 |
|---|---|
| colors | 粒子颜色 |
| map | 粒子材质 |
| size | 大小 |
| sizeAnnutation | 相机远近是否影响 粒子 |
| vertexColors | 粒子顶点颜色 |
| opacivy | 透明度 |
| transparent | 是否透明 |
| blending | 融合模式 |
| fog | 雾 |
四、SpriteCloud示例
示例效果为飞舞的雪花，关键代码如下：
function createParticles(size, transparent, opacity, vertexColors,
sizeAttenuation, color) {//创建粒子系统
var geom = new THREE.Geometry(); //创建几何体
var material = new THREE.PointCloudMaterial({ //创建粒子系统材质
size: size, //设置所有粒子的尺寸
transparent: transparent, //所有粒子是否透明
opacity: opacity, //所有粒子的透明度
vertexColors: vertexColors, //所有粒子应用粒子系统颜色
sizeAttenuation: sizeAttenuation, //所有粒子近大远小
color: color //粒子系统颜色
});
var range = 500; //粒子分布范围
for (var i = 0; i < 15000; i++) { //创建15000个粒子
var particle = new THREE.Vector3(Math.random() ＊ range - range / 2,
Math.random() ＊
range - range / 2, Math.random() ＊ range - range / 2); //随机生成粒子坐标
geom.vertices.push(particle); //设置粒子位置坐标
var color = new THREE.Color(0x00ff00); //创建颜色值
color.setHSL(color.getHSL().h, color.getHSL().s, Math.random() ＊
color.getHSL().l);
geom.colors.push(color); //设置粒子颜色
}
cloud = new THREE.PointCloud(geom, material); //创建粒子系统
cloud.name = "particles"; //命名粒子系统
scene.add(cloud); //将粒子系统添加进场景
}
以上的代码为创建粒子系统的方法，将一个几何体对象设置为不同的位置和颜色，以绘制上万个几何体粒子，最后将几何体粒子添加进粒子系统中。这样可实现通过粒子系统来管理大量单个粒子的功能。
