粒子和粒子系统
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函数创建一个从内向外的渐变效果，达到的效果就是一个比较明亮的发光点。运行结果如下：
