简介
大量使用粒子的时候, 会遇到性能问题, 因为么一个粒子就是一个模型,每个粒子对象, 分别由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, 可以轻松的管理大量粒子, 但是对于单个粒子的控制能力会渐弱