Animating Particle System in Three JS

Question

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

}

you could try github.com/Alchemist0823/three.quarks which handles all the particle interactions and has marketplace quarks.art/store to download particle systems. — Alchemist
– Alchemist, Commented Oct 30, 2023 at 16:03

vincent · Accepted Answer · 2013-10-12 13:56:04Z

4

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

answered Oct 12, 2013 at 13:56

vincent

1,53312 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Animating Particle System in Three JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related