Update amount of particles

Question

Please see attached fiddle. I would like to update the amount of particles with a click event.

So far I have only been able to update the camera settings.

Have gone through the three.js docs on updating things, but would appreciate a push in the right direction.

I was trying something along the lines of:

document.onclick = myClickHandler;

function myClickHandler() {           
    particle = new THREE.Sprite( material );
    particle.position.x = Math.random() * 2 - 1;
    particle.position.y = Math.random() * 2 - 1;
    particle.position.z = Math.random() * 2 - 1;
    particle.position.normalize();
    particle.position.multiplyScalar( Math.random() * 10 + 150 );
   particle.scale.x = particle.scale.y = 10;
   scene.add( particle );
    geometry.vertices.push( particle.position );
    }

Thanks!

https://jsfiddle.net/007zmukr/8/

Answer 1

I got it working.
Basically by...
Making the geometry and material variables global.
Separating the particle generation into a separate function, addParticle.
calling addParticle within the initial particle generation loop and from within the click handler.

Pretty much what you did above except moving it into it's own function.

https://jsfiddle.net/2pha/007zmukr/26/