Three.js拨云见雾(5)——粒子和精灵
three.js中粒子（也叫精灵），可用来创建非常细小的物体，可以用来模拟雨滴、雪、烟等其他有趣的效果。精灵模型对象Sprite和网格模型一样需要设置材质，不过精灵模型不需要开发者设置几何体，Threejs系统渲染的时候会自动设置。
创建精灵模型对象Sprite和创建网格模型对象一样需要创建一个材质对象，不同的地方在于创建精灵模型对象不需要创建几何体对象Geometry，精灵模型对象本质上你可以理解为已经内部封装了一个平面矩形几何体PlaneGeometry，矩形精灵模型与矩形网格模型的区别在于精灵模型的矩形平面会始终平行于Canvas画布。
精灵Sprite和SpriteMaterial
精灵材质对象SpriteMaterial和普通的网格材质一样可以设置颜色.color、颜色贴图.map、开启透明.transparent、透明度.opacity等属性，精灵材质对象SpriteMaterial的基类是材质Material。
精灵材质SpriteMaterial的属性除了和网格材质类似的属性和方法外，还有一些自己独特的方法和属性，比如.rotation旋转精灵模型，更多相关属性和方法可以查看threejs文档关于SpriteMaterial的介绍。
接下来，我们看一下如何创建一个简单的精灵系统
let texture = new THREE.TextureLoader().load("sprite.png");
// 创建精灵材质对象 SpriteMaterial
let spriteMaterial = new THREE.SpriteMaterial({
color:0xff00ff,//设置精灵矩形区域颜色
rotation:Math.PI/4,//旋转精灵对象45度，弧度值
map: texture,//设置精灵纹理贴图
});
// 创建精灵模型对象，不需要几何体geometry参数
let sprite = new THREE.Sprite(spriteMaterial);
scene.add(sprite);
// 控制精灵大小，比如可视化中精灵大小表征数据大小 只需要设置x、y两个分量就可以
sprite.scale.set(10, 10, 1);
复制代码一般设置精灵模型的大小是通过.scale属性实现，而精灵模型的位置通过属性.position实现，精灵模型和普通模型一样，可以改变它在三维场景中的位置，区别在于精灵模型的正面一直平行于canvas画布。
在使用透视投影相机对象的时候，精灵模型对象显示的大小和网格模型一样受距离相机的距离影响，也就是距离越远，显示效果越小。注意：精灵没有阴影效果。
粒子Points和PointsMaterial
粒子和精灵的效果是一样的，区别就是如果当前场景内的精灵过多的话，就会出现性能问题。粒子的作用就是为解决很多精灵而出现的，开发者可以使用粒子去模型数量很多的效果，比如下雨，下雪等，数量很多的时候就适合使用粒子来创建。当然提高性能的损失就是失去了对单个精灵的操作，所有的粒子的效果都是一样。总的来说，粒子就是提高性能减少的一些自由度，而精灵就是为了自由度而损失了一些性能。
//材质对象
let material = new THREE.PointsMaterial({ color: 0xff0000, size: 10.0 //像素尺寸 });
//点模型对象
let points = new THREE.Points(geometry, material);
//添加到场景中
scene.add(points);复制代码three.js中提供了多种方法使用HTML5画布来样式化粒子。如果使用的是THREE.CanvasRender，那么可以通过THREE.SpriteCanvasMaterial直接引用画布。如果使用的是THREE.WebGLRenderer,则需要一些额外的步骤才能使用HTML5画布样式化粒子。这里我们先不做深入学习。先了解如何使用即可，后面我们可以结合一个小特效来展示他们的具体用法。
总结
如果创建大量的例子，应该使用THREE.Points,这样所有的粒子将共享一个材质，并且单个粒子唯一可以改变的属性是颜色，这通过vertexColors属性设置为THREE.VertexColors并为创建THREE.Points的THREE.Geometry的colors数组提供一个颜色值来实现。THREE.Sprite实例用于创建单个粒子，一般适用于模型信息中。
作者：梧桐叶子
链接：https://juejin.cn/post/7000560149504983047