title: How to tween 10,000+ particles in Three.js?
body: <p>I have a <a href="http://threejs.org/docs/#Reference/Objects/Points" rel="nofollow">THREE.Points</a> object consisting of many (10,000+) vertices (a.k.a. particles).</p>
  
  <p>However, I run into performance problems when I try to tween the location of the individual particles. This is expected given that I am using the following code which loops through all the particles and assigns each a tween.</p>
  
  <pre><code>var duration = 500;
  
  for( var i = 0; i &lt; particles.geometry.vertices.length; i++ ){
  
      // http://threejs.org/examples/css3d_sprites.html
  
      var currentVertex = particles.geometry.vertices[i];
  
      new TWEEN.Tween( currentVertex )
          .to( 
              {
                  x: newVertices[i].x,
                  y: newVertices[i].y,
                  z: newVertices[i].z,
              },
              duration * ( Math.random() + 1 ) 
          )
          .easing( TWEEN.Easing.Exponential.InOut )
          .onUpdate( function(){
  
              particles.geometry.verticesNeedUpdate = true;
          })
          .start();
  }
  </code></pre>
  
  <p>Is there a better way to approach this?<br>
  I do not mind if all the particles are updated in one draw call to their new inbetween positions.</p>