Three.js - 在“粒子”网格中重新定位顶点

Question

我有一个基本的 three.js 游戏，我想添加粒子。我一直在网上搜索，包括这里的多个问题，最接近“粒子系统”工作的方法是使用 THREE.BufferGeometry、THREE.BufferAttribute 和 THREE.Points 网格。我是这样设置的：

const particleMaterial = new THREE.PointsMaterial( { size: 10, map: particleTexture, blending: THREE.AdditiveBlending, transparent: true } );
const particlesGeometry = new THREE.BufferGeometry;
const particlesCount = 300;
const posArray = new Float32Array(particlesCount * 3);

for (let i = 0; i < particlesCount; i++) {
    posArray[i] = Math.random() * 10;
}

const particleBufferAttribute = new THREE.BufferAttribute(posArray, 3);
particlesGeometry.setAttribute( 'position', particleBufferAttribute );

const particlesMesh = new THREE.Points(particlesGeometry, particleMaterial);
particlesMesh.counter = 0;
scene.add(particlesMesh);

这部分工作并在粒子的初始位置很好地显示粒子，但我当然想移动它们。 我已经尝试了各种方法，在我的“动画”功能中，但我没有发生正确的组合。我想移动粒子，理想情况下每帧一个顶点。 我在动画功能中正在做的当前事情 - 不起作用！ - 是这样的：

particleBufferAttribute.setXYZ( particlesMesh.counter, objects[0].position.x, objects[0].position.y, objects[0].position.z );
particlesGeometry.setAttribute( 'position', particleBufferAttribute );
//posArray[particlesMesh.counter] = objects[0].position;
particlesMesh.counter ++;
if (particlesMesh.counter > particlesCount) {
     particlesMesh.counter = 0;
}

如果有人对如何移动 Points 网格顶点有任何指示，那就太好了。

或者，如果这根本不是正确的方法，请告诉我。

我确实找到了 Stemkoski 的 ShaderParticleEngine，但我找不到任何有关如何使其工作的信息（文档非常少，似乎不包含示例）。

Answer 1

你不需要重新设置属性，但是你需要告诉渲染器属性已经改变了。

particleBufferAttribute.setXYZ( particlesMesh.counter, objects[0].position.x, objects[0].position.y, objects[0].position.z );
particleBufferAttribute.needsUpdate = true; // This is the kicker!

通过将needsUpdate 设置为true，渲染器知道将该属性重新上传到GPU。

这可能与您无关，但要知道以这种方式移动粒子很昂贵，因为您重新上传了position 属性每一帧，其中包括所有位置数据对于你没有移动的每一个粒子。