Threejs 样式化粒子

简介

大量使用粒子的时候， 会遇到性能问题， 因为么一个粒子就是一个模型，每个粒子对象， 分别由THREE.js 进行管理，THREE.js 提供了另一种方法来处理大量粒子，旧版本： THREE.PointCloud   新版本 THREE.Points

// 创建粒子容器
const geometry = new THREE.Geometry()
// 创建PointCloud 纹理
const material = new THREE.PointCloudMaterial({size: 4, vertexColors: true, color: 0xffffff})
// 新版 new THREE.PointsMaterial
// 循环将粒子的颜色和位置添加到网格当中
for (var x= -5; x <= 5; x++) {
    for(var y = -5; y <= 5; y++) {
        const particle = new THREE.Vector3(x * 10, y * 10)
        geometry.verticles.push(particle)
        geometry.colors.push(new THREE.color(+randomColor()))
    }
}

// 实例化 THREE.PointCloud  新版本为 PointsCloud 
const cloud = new THREE.PointCloud(geometry, material)
scene.add(cloud)

THREE.SpriteMaterial , 创建点精灵材质， 可以使用 map  属性来给他添加纹理贴图， 但是使用大量粒子时，这种方法的性能会降低， 并且会更加复杂

THREE.PointCloud, 可以轻松的管理大量粒子， 但是对于单个粒子的控制能力会渐弱