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.