title: Three.js - skinned skeletal mesh instances, animations and blending
body: <p>I'm working on a small multiplayer game which has a single skinned player mesh with many players using it. <em>Some Background:</em> I've tried loading via maya and blender collada export. Both seem to reference some form of animation data but I couldn't get it working. I've tried the maya JSON exporter, which spat out tiny 1k files with only a material line. Finally the blender JSON exporter worked. To those also trying to load skinned meshes, I found this very helpful: <a href="https://stackoverflow.com/questions/13518856/model-with-bones-animation-blender-export-animating-incorrectly-in-three-js/13548989#comment30576269_13548989">Model with bones animation (blender export) animating incorrectly in three.js</a></p>
  
  <p>So now I have a <code>geometry</code> object and a <code>materials</code> array from the JSON loader.</p>
  
  <p>I can set <code>skinning=true</code> on the materials, create a <code>THREE.SkinnedMesh</code>, add it to the scene, add animations via <code>THREE.AnimationHandler.add</code> (<strong>I'm quite unclear on what the <code>AnimationHandler</code> actually does</strong>), create a <code>THREE.Animation</code>, call <code>play()</code> and <code>update(dt)</code>. Finally I have a single mesh and an animation playing in my scene.</p>
  
  <p>Now what I want are these...</p>
  
  <ol>
  <li><p><strong>Many instances</strong> - I want more than one player model running around in my scene.</p>
  
  <ul>
  <li>I don't want the same mesh and animation data loaded many times.</li>
  <li>Animation time should be per-instance (so they don't all animate in sync).</li>
  </ul>
  
  <p><em>Should I be creating many <code>THREE.SkinnedMesh</code> and <code>THREE.Animation</code> for the same model? Where does <code>THREE.AnimationHandler</code> come in?</em></p></li>
  <li><p><strong>Many animations</strong> - I want idle/run cycles able to be played individually.</p>
  
  <p>AFAIK there's only a single timeline of animation keyframes. <em>How does Three.js partition this up for me, or do I have to do it manually?</em></p></li>
  <li><p><strong>Animation Blending</strong> - When a character stops running and stands still with the idle animation, I don't want an instant snap from one to the other. I'd like to pause the run animation and blend that state back into the idle animation.</p>
  
  <p><em>Is this currently possible with skinned meshes (not morph targets)? Are there examples or docs about this?</em></p></li>
  </ol>
  
  <p>Any information would be greatly appreciated, even just a nudge in the right direction. <em>I'm not after a full tutorial</em>, I would like some higher level information about these features.</p>
  
  <p>I could happily implement <em>2</em> and <em>3</em>, but I'd like some information/descriptive docs about the threejs skinning and animation framework to get me started. For example, <a href="http://threejs.org/docs/#Reference/Extras.Animation/AnimationHandler" rel="noreferrer">this</a> isn't much to go on.</p>
  
  <p>[<em>EDIT</em>]<br/>
  Thanks, @NishchitDhanani, this page is quite good but doesn't mention multiple animations or blending skeletal animations: <a href="http://chimera.labs.oreilly.com/books/1234000000802/ch05.html#animating_characters_with_skinning" rel="noreferrer">http://chimera.labs.oreilly.com/books/1234000000802/ch05.html#animating_characters_with_skinning</a></p>
  
  <p>This page says multiple animations are still a current issue but not much more (discussed a little in the comments):
  <a href="http://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/" rel="noreferrer">http://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/</a></p>
  
  <p>The current answers are...</p>
  
  <ol>
  <li>Use many <code>THREE.SkinnedMesh</code> and still not sure about <code>THREE.AnimationHandler</code>.</li>
  <li>Don't know. Perhaps there's a way to modify the start/end keyframes manually in the <code>THREE.Animation</code>.</li>
  <li>Not implemented AFAIK. I might try creating a custom shader that can take two <code>THREE.Animation</code>s and interpolate between them.</li>
  </ol>