图形化开发（五）054-Three.js之Points 粒子——points 粒子-球体、星空

图形化开发（五）054-Three.js之Points 粒子——points 粒子-球体、星空

points 粒子

粒子和精灵的效果是一样的，它们之间的区别就是如果当前场景内的精灵过多的话，就会出现性能问题。粒子的作用就是为解决很多精灵而出现的，我们可以使用粒子去模型数量很多的效果，比如下雨，下雪等，数量很多的时候就适合使用粒子来创建，相应的，提高性能的损失就是失去了对单个精灵的操作，所有的粒子的效果都是一样。总的来说，粒子就是提高性能减少的一些自由度，而精灵就是为了自由度而损失了一些性能。

粒子THREE.Points和精灵THREE.Sprite还有网格THREE.Mesh都属于THREE.Object3D的一个扩展，但是粒子有一些特殊的情况就是THREE.Points是它们粒子个体的父元素，它的位置设置也是基于THREE.Points位置而定位，而修改THREE.Points的scale属性只会修改掉粒子个体的位置。下面先查看一下一个粒子的创建，创建一个粒子，需要一个含有顶点的几何体，和粒子纹理THREE.PointsMaterial创建：

//球体
var sphereGeometry = new THREE.SphereGeometry(5, 24, 16); // 球
var sphereMaterial = new THREE.PointsMaterial({color: 0xff00ff});
var sphere = new THREE.Points(sphereGeometry, sphereMaterial);
scene.add(sphere);

粒子会吸附在几何体的表面

上面是一个通过球体几何体创建的一个最简单的粒子特效。
几何体使用任何几何体都可以，甚至自己生成的几何体都可以，比如创建星空的案例：

//星空
var starsGeometry = new THREE.Geometry();
//生成一万个点的位置
for (var i = 0; i < 10000; i++) {
    var star = new THREE.Vector3();
    //THREE.Math.randFloatSpread 在区间内随机浮动* - 范围 / 2 *到* 范围 / 2 *内随机取值。
    star.x = THREE.Math.randFloatSpread(2000);
    star.y = THREE.Math.randFloatSpread(2000);
    star.z = THREE.Math.randFloatSpread(2000);
    starsGeometry.vertices.push(star);
}
var starsMaterial = new THREE.PointsMaterial({color: 0x888888});
var starField = new THREE.Points(starsGeometry, starsMaterial);
scene.add(starField);

THREE.PointsMaterial 粒子的纹理

如果我们需要设置粒子的样式，还是需要通过设置THREE.PointsMaterial属性实现：

var pointsMaterial = new THREE.PointsMaterial({color: 0xff00ff}); //设置了粒子纹理的颜色

我们还可以通过PointsMaterial的size属性设置粒子的大小：

var pointsMaterial = new THREE.PointsMaterial({color: 0xff00ff, size:4}); //粒子的尺寸改为原来的四倍
//或者直接设置属性
pointsMaterial.size = 4;

我们也可以给粒子设置纹理：

var pointsMaterial = new THREE.PointsMaterial({color: 0xff00ff, map:texture}); //添加纹理

默认粒子是不受光照的影响的，我们可以设置lights属性为true，让粒子受光照影响：

var pointsMaterial = new THREE.PointsMaterial({color: 0xff00ff, lights:true}); 
//或者
pointsMaterial.lights = true; //开启受光照影响

我们也可以设置粒子不受到距离的影响产生近大远小的效果：

var pointsMaterial = new THREE.PointsMaterial({color: 0xff00ff, sizeAttenuation: false}); 
//或者
pointsMaterial.sizeAttenuation = false; //关闭粒子的显示效果受距离影响