Three js实现球缓冲几何体实现粒子特效

当前Three.js在网上有不少的零碎教程，然而对于初级开发者就像入门迈槛不知先迈左脚还是右脚，于是我就先进去试试水...... 发现还不错，虽然有点云里雾里但是搞懂了内部基础构造还是比较简单的，而Three.js官网上的示例逼格之高又令人望而却步。

首先对于three js场景的配置网上和手册都有详细的教程，在此处我就不一一赘述了。两种方法实现例子特效效果水平，第一种是利用ParticleSystem设置粒子特效效果，另外一种是设置PointsMaterial完成属性的效果展示。

第一种方法的最简单的粒子系统代码：

// 创建球体模型
let ball = new THREE.SphereGeometry(40, 30, 30);
// 创建粒子材料
let pointsMaterial = new THREE.PointsMaterial({
        // 粒子颜色
        color: 0xffffff,
        // 粒子大小
        size: 2
    });
// 创建粒子系统
let particleSystem = new THREE.ParticleSystem(ball, pointsMaterial);
// 加入场景
scene.add(particleSystem);

粒子系统读取模型中的vertices属性，即所有顶点位置，结合粒子材质来创建粒子效果，以上代码效果如下；可以观察到，粒子默认会展示为方块形状，若要修改，可以在构建粒子材质时时传入map属性，应用一张图片或者应用canvas的绘图结果，具体后面会提到。

第二种方法实现例子特效是更改size的大小来实现效果，具体代码如下所示：

const SphereGeometry = new THREE.SphereBufferGeometry(3, 20, 30);
const PointsMaterial = new THREE.PointsMaterial();
PointsMaterial.size = 0.01
const points = new THREE.Points(SphereGeometry, PointsMaterial)
scene.add(points)

size为0.01的效果展示：