javascript - 三个 JS 中的动画粒子系统

Question

我正在使用以下代码为 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

}

Answer 1

首先，我认为您应该更新顶点，而不是用新实例替换它们:

particleSystem.geometry.vertices[i].set( pX, pY, pZ );

然后，您可能还必须告诉 Three.js 顶点已更改:

particleSystem.geometry.verticesNeedUpdate = true;

这些应该在 update()

期间完成