Three.js - Changing particle position within a THREE.ParticleSystem Object

Question

I have several particle system, each with around 20k vertices. I am trying to move each individual particle within the particle system to a new Vector3 which is a shape that I have mapped out.

The desired effect is that on a click event, the particles rearrange themselves (using TWEEN.js) into a shape that I have defined.

Is this actually possible? I have noticed that these vertices never change from the position they are initialised in which shouldn't be the case seeing as I rotate the whole particle system in the Render loop.

What is the best way of implementing this?

Answer 1

when updating the vertices of individual particles you need to flag the changes in the main render loop, rotating the whole particle system does not require this

particleSystem.geometry.__dirtyVertices = true;