Three.js进阶之粒子系统（一）

一些特定模糊现象，经常使用粒子系统模拟，如火焰、爆炸等。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);                                //将粒子系统添加进场景
        }

        以上的代码为创建粒子系统的方法，将一个几何体对象设置为不同的位置和颜色，以绘制上万个几何体粒子，最后将几何体粒子添加进粒子系统中。这样可实现通过粒子系统来管理大量单个粒子的功能。