Three.js

Question

我有一个基本的 three.js 游戏在运行，我想添加粒子。我一直在网上搜索，包括这里的多个问题，我最接近 'particle system' 工作的是使用 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);

这部分工作并在初始位置很好地显示粒子，但我当然想移动它们。我在我的 'animate' 函数中尝试了各种方法，但我没有找到正确的组合。我想移动粒子，最好是每帧一个顶点。我目前在动画功能中所做的事情 - 不起作用！ - 是这样的：

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;
}

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

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

我确实找到了 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 属性 每一帧 ，其中包括您没有移动的每个粒子的所有位置数据。

Three.js - 在 'particle' 网格中重新定位顶点

Three.js - repositioning vertices in a 'particle' mesh

particle-system