title: Minimizing number of Three.js Draws
body: <p>I'm testing the use of Three.js for my project (<a href="http://agentscript.org" rel="nofollow noreferrer">http://agentscript.org</a>) and the first test seems quite slow:</p>
  
  <blockquote>
    <p><a href="https://asx-vqnhxlahpe.now.sh/test.html?three0" rel="nofollow noreferrer">https://asx-vqnhxlahpe.now.sh/test.html?three0</a></p>
  </blockquote>
  
  <p>(note: the site can take a while, it "sleeps" after a period of non-use)</p>
  
  <p>This is apparently due to my using way too many draws, one per agent.
  <code>
  renderer.info.render
  Object {calls: 10002, vertices: 60090, faces: 20000, points: 0}
  </code></p>
  
  <p>I believe using a BufferGeometry would solve this, but I don't know how to use one and still be able to access each individual agent so that my step/animate function can modify (move, rotate) them.</p>
  
  <p>How would I do this?</p>
  
  <p>I realize I could simply go to using my own Shader, and plan to do so, but I'd prefer to have an intermediate solution or two first. </p>