threejs粒子与粒子系统

来源于：知屋安砖

使用粒子可以模拟出细小的物体，或组成三维模型进行变换。

1. 粒子的创建

首先创建粒子

var geom = new THREE.Geometry();
var material = new THREE.ParticleBasicMaterial({
size:4, vertexColors:true, color: 0xffffff
})
var particle = new THREE.Vector3{x * 10, y *10, 0};
geom.vertices.push(particle);
var system = new THREE.ParticleSystem(geom, material);
scene.add(system);

效果如下：

Notes:
若使用CanvasRender渲染器，可直接将创建好的粒子添加进场景中。

2. 粒子系统

ParticleSystem（粒子系统）用来在WebGLRender中显示粒子。
先创建对象，然后用THREE.Vector3构建的粒子添加到几何体上，最后添加ParticleBasicMaterial对象，创建ParticleSystem并添加到场景中。
ParticleBasicMaterial属性：
color（颜色）、map（材质）、size（大小）、sizeAnnutation（false：粒子尺寸相同；true：大小取决于相机的远近）、vetexColors（true：粒子使用color数组中的值）、opacity（透明度）、transparent（透明，与opacity一起使用）、blending（融合模式）、fog（雾化效果）
Eg:

 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++) {
        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);
   }

效果如下：

3. 用HTML5画布格式化粒子

（1） 在CanvasRenderer类里使用HTML5画布

通过ParticleCanvasMaterial，你可以将HTML5画布的输出结果作为粒子的纹理。该材质是特别为CanvasRenderer创建的，而且只能用于这种渲染器。
属性：color（颜色）、program（参数函数）、opacity（透明度）、transparent（是否透明）、blending（融合模式）
Eg:

var material = new THREE.ParticleCanvasMaterial({
	program:draw,
	color: 0xffffff
});
var range = 500;
for(var i = 0; i < 1000; i++)
{
	var particle = new THREE.Particle(material);
	particle.position = new THREE.Vector3(
		Math.random() * range - range / 2,
		Math.random() * range - range / 2,
		Math.random() * range - range / 2
		);
	particle.scale = 0.1;
	particle.rotation.z = Math.PI;
	scene.add(particle);
}

效果如下：

Notes:
CanvasRenderer可以直接创建THREE.Particle对象

（2） 在WebGLRenderer中使用HTML5画布

用ParticleBasicMaterial在WebGLRenderer中使用HTML5画布。ParticleBasicMaterial有一个map（贴图）属性，通过map属性为粒子加载纹理。

4. 使用纹理格式化粒子

（1） 单个材质（雨滴为例）

获取表示雨滴的纹理：

var texture = new THREE.TextureLoader().load("/lib/textures/rain.png");

效果如下：

（2） 多个材质（雪花为例）

一个ParticleSystem只能有一种材质。如果要用多个材质，那么只能使用多个粒子系统。
Eg:

var texture1 = THREE.ImageUtils.loadTexture("../assets/textures/particles/snowflake1.png");
var texture2 = THREE.ImageUtils.loadTexture("../assets/textures/particles/snowflake2.png");
var texture3 = THREE.ImageUtils.loadTexture("../assets/textures/particles/snowflake3.png");
var texture4 = THREE.ImageUtils.loadTexture("../assets/textures/particles/snowflake5.png");

scene.add(createPointCloud("system1", texture1, size, transparent, opacity, sizeAttenuation, color));
scene.add(createPointCloud("system2", texture2, size, transparent, opacity, sizeAttenuation, color));
scene.add(createPointCloud("system3", texture3, size, transparent, opacity, sizeAttenuation, color));
scene.add(createPointCloud("system4", texture4, size, transparent, opacity, sizeAttenuation, color));

效果如下：

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

基于这个几何体的顶点创建出一个粒子系统，然后通过generateSprite()将粒子的纹理设置成发光点（在HTML5的画布元素上生成）。
Eg:

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

效果如下：

Notes：
（1）Map属性以使用图片或者HTML5的画布来格式化粒子。
（2）使用THREE.Sprite类来为三维场景创建一种贴图对象。将该对象的useScreen-Coordinates属性设为true，那么该对象就会按照屏幕上绝对位置来定位。