How to animate 2 collada object at the same time?

Hello,

I’m trying to put 2 collada objects and animate them at the same time but it doesn’t work.

Can someone tell me why, with my code, only one collada is animated ?

Here is my function to add an animated object :

function createObjectAnimate(object,src,size1, size2, size3, posX,posY, posZ, rotation,audio){
    var loader = new THREE.ColladaLoader();
    loader.load( src, function ( collada ) {
        var animations = collada.animations;
    var object = collada.scene;
    object.scale.set(size1,size2,size3); 
    object.position.x = posX;
    object.position.y = posY;
    object.position.z = posZ;
    object.rotation.y = rotation;
    if(audio)
        object.add(audio);

    object.traverse( function ( node ) {
	    if ( node.isSkinnedMesh ) {
		    node.frustumCulled = false;
	    }
         } );
    mixer = new THREE.AnimationMixer( object );
    mixer.clipAction( animations[0] ).play();
    scene.add( object );						

    object.traverse(function (child) {
	    if (child instanceof THREE.Mesh) {
	   	    child.castShadow = true;
		    child.receiveShadow = true;
	    }
    });

   });					
}

and here is my call function code :

createObjectAnimate(boy,'boy.dae',1, 1, 1, 0,20,310, Math.PI,createSound('cry.mp3'));
createObjectAnimate(monster,'monster.dae',2, 2, 2, 0, 20, 0, 0,createSound('hit.mp3'));

So, there is only the monster who is animated.

Any idea ?

Thank you.

Can you please verify if it’s possible to load both objects for themselves? I mean load only boy.dae and then monster.dae and see if both are correctly rendered.

Yes, if I put only one of these two objects, it works.

In reality, when I put the boy and the monster, the boy is animated for 2 seconds until the monster is loaded. But when the monster is loaded, the boy stops moving.

This could be the problem. Instead of creating just a single variable mixer, you have to create an array mixers that holds all instance of THREE.AnimationMixer. In your animation loop, you iterate over this array and update each entry.

Thank you for your answer.
And how can I do that ?

I tried to do this in my create function :

array[cpt] = new THREE.AnimationMixer( object );
					//array[cpt].clipAction( animations[0] ).play();
					scene.add( object );						
					cpt++;

And then I tried to activate the animations but I don’t know how :

array.forEach(function(action){
					
					action.play();
				});

Normally you playback the AnimationClips like before. Try this:

var mixer = new THREE.AnimationMixer( object );
mixer.clipAction( animations[0] ).play();
scene.add( object );
mixers.push( mixer );

Ok thanks a lot but if I only do that, just the monster is animated. So how can I do to play all animations in my array mixers ?

Because this doesn’t work :

   mixers.forEach(function ( action) {
        action.play();
   });

I don’t think you need that code snippet. You need this in your animation loop:

for ( let i = 0, l = mixers.length; i < l; i ++ ) {

    mixers[ i ].update( delta );

}

Ok, when I put your code in my function createAnimate, it does’nt work, that tells me that delta is not defined.
However, if I put your code in render(); that works ! Now the only problem is that the monster is twice as fast as the boy that is to say that when the boy does 1 movement, the monster does 2 movements.

Thanks.

That’s the intended place for this code snippet. If you need more help, it’s best when you share your code as a live example.

I finally put this in render :

if(mixers.length > 1)
    mixers[0].update(delta);

And that works ! Thank you for all !

Just one thing, can you explain me what update(delta) does please ? Thank you

Please have a look at:

https://threejs.org/docs/index.html#api/en/animation/AnimationMixer.update

Ok thanks for all !