我正在使用以下代码为 Three.js 中的粒子系统中的某些粒子设置动画。
for(var i = 0; i < particleSystem.geometry.vertices.length; i++ ){
var pX = Math.sin(i + counter) * 100 + Math.random() * 20,
pY = Math.cos(i + counter) * 100 + Math.random() * 20,
pZ = Math.sin(i + counter) * 100 + Math.random() * 20;
particleSystem.geometry.vertices[i] = new THREE.Vector3(pX, pY, pZ);
}
它通过改变粒子的顶点来工作。它可以毫无错误地改变它们,但没有更新。我可以四处走动,所有其他动画都运行良好。这是在我的 animate()
函数中,如下所示:
function animate(){
for(var i = 0; i < particleSystem.geometry.vertices.length; i++ ){
var pX = Math.sin(i + counter) * 100 + Math.random() * 20,
pY = Math.cos(i + counter) * 100 + Math.random() * 20,
pZ = Math.sin(i + counter) * 100 + Math.random() * 20;
particleSystem.geometry.vertices[i] = new THREE.Vector3(pX, pY, pZ);
}
counter += 1;
requestAnimationFrame(animate); // So it stops when you change window and otherwise repeats
renderer.render(scene,camera); // Render
controls.update(clock.getDelta()); // Update control/camera movement information
}
最佳答案
首先,我认为您应该更新顶点,而不是用新实例替换它们:
particleSystem.geometry.vertices[i].set( pX, pY, pZ );
然后,您可能还必须告诉 Three.js 顶点已更改:
particleSystem.geometry.verticesNeedUpdate = true;
这些应该在 update()
关于javascript - 三个 JS 中的动画粒子系统,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19331734/