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()

期间完成

三个JS中的动画粒子系统

1 个答案: