粒子和粒子系统

1.粒子材质和粒子几何体

    创建粒子系统的点，可以存放在Geometry几何体中。使用Geometry的vertices保存点、colors保存点的颜色。但我们必须使用粒子的专用材质对象PointCloudMaterial（原名叫做ParticleBasicMaterial）设置材质。包含的属性如下列表：

    名称/描述

    color/PointCloud对象中所有粒子的颜色。如果vertexColors设置为true，而且也指定了几何体的colors属性，那么该属性被忽略

    map/可以在粒子上应用某种材质。例如可以让粒子看起来像雪花

    size/粒子大小

    sizeAttenuation/如果设置为false，所有粒子都有拥有相同的尺寸。如果为true，粒子的大小取决于离相机的远近

    vertexColors/如果设置为true，并且几何体的colors数组也有值，那就使用颜色数组中的值

    opacity/跟transparent属性一起使用，用来设置粒子的透明度

    transparent/如果为true，那么opacity设置有效

    blending/渲染粒子时的融合方式

    fog/是否采用场景的雾化效果

    把点vertex和颜色color都附加到Geometry对象中后，使用PointCloud（原ParticleSystem对象）创建几何粒子系统。如下面的例子：

function createParticle(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++){
                    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);

            }

2.使用Canvas输出结果作为粒子材质

    和1中的创建PointCloudMaterial相似，只是这里增加了一个属性map，减少了属性vertexColors（因为直接使用纹理而不是颜色）。新增了一个map属性，具体值是调用getTexture函数返回一个Texture对象。创建PointCloudMaterial代码如下：

var material = new THREE.PointCloudMaterial({
                    size: size,
                    transparent: transparent,
                    opacity: opacity,
                    map: getTexture(),
                    sizeAttenuation: sizeAttenuation,
                    color: color,
                });

    Texture对象可以直接接受一个canvas对象，把canvas的输出作为纹理。创建Texture代码如下：

var getTexture = function () {
            var canvas = document.createElement('canvas');
            canvas.width = 32;
            canvas.height = 32;

            var ctx = canvas.getContext('2d');
            // the body
            ctx.translate(-81, -84);

            ctx.fillStyle = "orange";
           ...
            ctx.fill();


            var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;
            return texture;
        };

    需要设置纹理的needsUpdate为true。另外，在创建PointCloud对象时也要额外设置它的sortParticles属性为true。这样可以保证粒子在渲染之前沿着屏幕上的z轴排好序。

3.使用外部图片作为粒子的材质

    和2相似，只不过这里我们在创建纹理时直接如下方式读取外部图片作为纹理：

var texture = THREE.ImageUtils.loadTexture("../assets/textures/particles/raindrop-3.png");

    如果我们想模拟下雨的效果，可在创建vertices时，给每个位置指定x和y方向的移动速度。

for(var i = 0; i < 1500; i++){
                    var particle = new THREE.Vector3(Math.random() * range - range / 2, Math.random() * range * 1.5, Math.random() * range - range / 2);
                    particle.velocityY = 0.1 + Math.random() / 5;
                    particle.velocityX = (Math.random() - 0.5) / 3;
                    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);
                }

    在渲染的时候，可以没渲染一次，vertices根据速度移动一次。渲染代码如下：

if(controls.rotateSystem){
                    var vertices = cloud.geometry.vertices;
                    vertices.forEach(function(vector){
                        vector.y -= vector.velocityY;
                        vector.x += vector.velocityX;

                        if(vector.y <= 0) vector.y = 60;
                        if(vector.x <= -20 || vector.x >= 20) vector.x = -vector.x;
                    });
                }

    另外，在创建PointCloudBasicMaterial时，可以指定depthWrite属性为false。该属性决定这个对象是否影响WebGL的深度缓存。设置为false，可以保证各个粒子系统之间不受影响。如果不设置如此，当一个粒子处在另外一个粒子的前面，而后者来自别的例子系统，有时候会看到纹理的黑色背景。

4.使用精灵THREE.Sprite

    THREE.Sprite类可用于如下两种目的：

    创建一个可以基于屏幕坐标移动、定位和缩放的对象。你可以用它来创建一个平视显示器（HUD），就像在三维场景上蒙了一层;

    创建一个类似粒子的、可以在三维空间移动的对象，类似使用CanvasRenderer的THREE.Particle。三维场景中的精灵有事有称作广告牌。总是相面镜头，就像高速公路上的广告牌总是面向司机。

    使用精灵，需要用到材质对象SpriteMaterial和网格对象Sprite。如果我们要实现一个外部图片作为纹理，像广告一样在屏幕底部左右移动。应该怎样实现？要使用精灵对象。摄像头一般使用正射投影。例如：

var cameraOrtho = new THREE.OrthographicCamera(0, window.innerWidth, window.innerHeight, 0, -10, 10);

    left为0， right为window的width，top为window的height，bottom为0，near为-10， far为10。

    下面的一个方法实现了如何创建Sprite网格对象：

function createSprite(size, transparent, opacity, color, spriteNumber){
                var spriteMaterial = new THREE.SpriteMaterial({
                    transparent: transparent,
                    opacity: opacity,
                    color: color,
                    map: getTexture()
                });

                spriteMaterial.map.offset = new THREE.Vector2(0.2 * spriteNumber, 0);
                spriteMaterial.map.repeat = new THREE.Vector2(1/5, 1);
                spriteMaterial.depthTest = false;

                spriteMaterial.blending = THREE.AdditiveBlending;

                var sprite = new THREE.Sprite(spriteMaterial);
                sprite.scale.set(size, size, size);
                sprite.position.set(100, 50, -10);
                sprite.velocityX = 5;

                sceneOrtho.add(sprite);
            }

    首先创建了一个SpriteMaterial，传递的参数和创建粒子参数差不多。创建之后，需要设置map的一些属性，包括offset和repeat。由于我们使用的图片是一个横排包含了五个图标的压缩图片。所以需要指定偏移量offset。offset值从0到1。如果要显示第三个图标，那么x偏移量为0.2*2。y偏移量不变。repeat是指重复显示，x轴重复为1/5是指显示整个图片的1/5，y轴重复1次。设置SpriteMaterial，可以使Sprite和其他的粒子系统更好的融合显示。

    接下来床架Sprite对象，设置它的scale和position属性，velocityX是我们自定义x轴移动速度的因子。最后，我们还得考虑如何渲染。代码如下：

function render(){
                stats.update();

                camera.position.y = Math.sin(step += 0.01) * 20;

                sceneOrtho.children.forEach(function(e){
                    if(e instanceof THREE.Sprite){
                        e.position.x = e.position.x + e.velocityX;
                        if(e.position.x > window.innerWidth){
                            e.velocityX = -5;
                            e.material.map.offset.set(1/5 *(controls.sprite % 4), 0);
                        }
                        if(e.position.x < 0){
                            e.velocityX = 5;
                        }
                    }
                });

                requestAnimationFrame(render);

                webGLRenderer.render(scene, camera);
                webGLRenderer.autoClear = false;
                webGLRenderer.render(sceneOrtho, cameraOrtho);
            }

    camera是用来显示三维图形的摄像头，和我们显示精灵的sceneOrtho互不影响。我们遍历了sceneOrtho.children集合。如何元素时THREE.Sprite，我们重重新设置position.x，让Sprite动起来。

   如果要让两个场景都渲染出来，我们需要设置WebGLRenderer的autoClear属性为false。

5.使用THREE.Sprite实现三维效果

    要实现三维效果，可使用THREE.Object3D对象作为Sprite对象的集合。如下所示：

function createSprites(){
                group = new THREE.Object3D();
                var range = 200;
                for(var i = 0; i < 400; i++){
                    group.add(createSprite(10, false, 0.6, 0xffffff, i % 5, range));
                }
                scene.add(group);
            }

    createSprite和4中的createSprite函数显示，只是多了一个range参数，限制坐标范围。

6.从高级几何体中创建粒子系统

    粒子系统所渲染的粒子来自于几何体的顶点。如果我们提供一个复杂的几何体，诸如环面纽结或管道，我们可以基于这个几何体的顶点创建出一个粒子系统。

   首先创建一个复杂几何体TorusKnotGeometry。创建代码如下：

var geom = new THREE.TorusKnotGeometry(
                            controls.radius,
                            controls.tube,
                            Math.round( controls.radialSegments),
                            Math.round(controls.tubularSegments),
                            Math.round(controls.p), Math.round(controls.q),
                            controls.heightScale
                        );

    参数这里不再多说了。接下来基于这个几何体创建粒子对象PointCloud。代码如下：

function createPointCloud(goem){
            var material = new THREE.PointCloudMaterial({
                color: 0xffffff,
                size: 3,
                transparent: true,
                blending: THREE.AdditiveBlending,
                map: generateSprite()
            });

            var cloud = new THREE.PointCloud(goem, material);
            cloud.sortParticles = true;

            return cloud;
        }

    和创建其他网格相似，字节把复杂几何体传递和材质传递给PointCloud的构造函数。这里的generateSprite函数是通过Canvas绘制一个高亮的纹理。纹理的绘制如下：

function generateSprite(){
            var canvas = document.createElement("canvas");
            canvas.width = 16;
            canvas.height = 16;
            var context = canvas.getContext("2d");

            var gradient = context.createRadialGradient(canvas.width/2, canvas.height/2, 0, canvas.width/2, canvas.height/2, canvas.width/2);
            gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
            gradient.addColorStop(0.2, "rgba(0, 255, 255, 1)");
            gradient.addColorStop(0.4, "rgba(0, 0, 64, 1)");
            gradient.addColorStop(1, "rgba(0, 0, 0, 1)");

            context.fillStyle = gradient;
            context.fillRect(0, 0, canvas.width, canvas.height);

            var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;
            return texture;
        }

    通过createradialGradirent函数创建一个从内向外的渐变效果，达到的效果就是一个比较明亮的发光点。运行结果如下：