Three.js - skinned skeletal mesh instances, animations and blending

Question 1

As of release 67 (April 2014), both skeletal animation blending and multiple animations are supported. You will still need to create a SkinnedMesh for each model. The AnimationHandler is responsible for updating (ticking) the animations every frame so you should be calling update on that and not manually on each Animation.

See the newly added example: webgl_animation_skinning_blending.html or check out a couple of my own here:

Basic Character Controller (with time warped speed blend)

Time Warped Speed Blend

Question 2

I have been able to simultaneously deploy four different animated models created with Blender and exported as JSON files by creating individual skinned meshes for each model using individually tailored functions with the JSON loader. Each of my four models has different mesh, animations, textures and numbers of keyframes.

var loader = new THREE.JSONLoader(); 
loader.load("model_1.js", createSkinnedMeshforModel_1);
loader.load("model_2.js", createSkinnedMeshforModel_2);
loader.load("model_3.js", createSkinnedMeshforModel_3);

...

var animations = [];

function createSkinnedMeshforModel_1( geometry, materials )
{
  var myModel1, animation;
  THREE.AnimationHandler.add( geometry.animation );
  myModel1 = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
  enableSkinning( myModel1 );
  scene.add( myModel1 );
  animation = new THREE.Animation(myModel1, Model1_Animation_title, THREE.AnimationHandler.CATMULLROM);
  animations.push( animation );
  for( var i = 0; i < animations.length; i ++ )
  {
    animations[ i ].play();
  }
}


function createSkinnedMeshforModel_2( geometry, materials )
{
  var myModel2, animation;
  THREE.AnimationHandler.add( geometry.animation );
  myModel2 = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
  enableSkinning( myModel2 );
  scene.add( myModel2 );
  animation = new THREE.Animation(myModel2, Model2_Animation_title, THREE.AnimationHandler.CATMULLROM);
  animations.push( animation );
  for( var i = 0; i < animations.length; i ++ )
  {
    animations[ i ].play();
  }
}

function createSkinnedMeshforModel_3( geometry, materials )
{
  var myModel3, animation;
  THREE.AnimationHandler.add( geometry.animation );
  myModel3 = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
  enableSkinning( myModel3 );
  scene.add( myModel3 );
  animation = new THREE.Animation(myModel3, Model3_Animation_title, THREE.AnimationHandler.CATMULLROM);
  animations.push( animation );
  for( var i = 0; i < animations.length; i ++ )
  {
    animations[ i ].play();
  }
}

The enableSkinning() function is the same as the one provided in DEVMATRIX's really helpful tutorial

The "Modelx_Animation_title" variable is the animation title name defined within Blender and copied into the model's exported JSON file by the Three.js Blender exporter.

When I load multiple copies of a given model they initially animate in Sync. However I have been able to get them to animate out of sync by individually pausing each model for a short random duration before starting playing again. The animations for each individual model resume from the frame that they were paused at.

animations[ i ].pause();
... (random delay) ...
animations[ i ].play();

Perhaps this approach provides a solution of sorts to question 1, and possibly to question 2.

With regard to Question 2, Three.js release r62 updated the Blender exporter to allow "Export multiple actions". Although I haven't tried it perhaps this may allow loading two or more copies of a given model while specifying the animation titles for the different actions. It might then be possible to swap the models in and out of the view when different actions are required.

If that works, then a possible solution to Question 3 might be to create an additional animated action within Blender that blends the model from an active state to it's idle state.

Question 3

@Xealgo: There's a new exporter for Maya that does bones and animations as well. I'd love to have that few months ago, before I was forced to go with Blender workflow. :)

Here's a link: https://github.com/mrdoob/three.js/tree/dev/utils/exporters/maya