CODEWITHSUNDEEP
javascriptthree.js
JVE999
JVE999

Reputation: 3517

Animating Particle System in Three JS

I'm using the following code to animate some particles in a particle system in 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);
                        }

It works by changing the vertices of the particles. It changes them fine with no error, but there is no update. I can move around and all of the other animation is working fine. This is in my animate() function, like this:

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

}

Upvotes: 1

Views: 2677

Answers (1)

vincent
vincent

Reputation: 1533

First, I think you should update the vertices, not replacing them by new instances:

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

Then, you also may have to tell Three.js that the vertices have changed:

particleSystem.geometry.verticesNeedUpdate = true;

These should be done during the update()

Upvotes: 4

Related Questions