Loading animations on different GLTF models in scene

Questions
,
1

Hello all, I’m trying to load and play a few different animations that my models contain but can’t get it to work, I either get one animation to work or non at all. Following this example: Animation system – three.js docs (threejs.org)

This is what I have

loadModelFile = (fileName, path) => {
    return new Promise((resolve) => {
      let dracoLoader = new THREE.DRACOLoader();
      dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.5/');
      let loader = new THREE.GLTFLoader();

      loader.setDRACOLoader(dracoLoader);

      loader.load(`${path}${fileName}`, (gltf) => {
        console.info("GLTF file load complete");
        
        const model = gltf.scene;
        scene.add(model);
        model.scale.set(0.75, 0.75, 0.75);
     		model.position.set(0, 0.2, 0);
     		model.rotation.set(0, -0.2, 0);
        
                 model.traverse((o) => {
          if (o.isMesh) {
            o.castShadow = true;
            o.receiveShadow = true;
            o.frustumCulled = false;
          }
        });
         
        const mixer = new THREE.AnimationMixer(model);
        const clips = model.animations;
                   clips.forEach(function(clip) {
                     mixer.clipAction(clip).play();

                   });

function animate(){
  requestAnimationFrame( animate );
  
  delta = clock.getDelta();
  
  	if ( mixer ) mixer.update( delta );

If any one can point out what I’m doing wrong I would be very grateful.

Thanks in advance!

2

maybe a possible issue: (it’s just a guess)
you try to manage animations of multiple meshes using a single mixer.
I recommend to use separate mixers, something like.

myMixers[i].new THREE.AnimationMixer(model);

and using some loop in the renderer:

for (let i in myMixers){ myMixers[i].update( delta ); }
3

Thank you for your answer, I ended up just adding all the different meshes and animations in one gltf file and that solved my problem.

4

I think you are creating mixer and animation actions after loader.load() function instead of doing it inside (gltf)=>{} function.

So if model gets loaded fast mixer is created on this model. If it loads slowly, the loader.load() exists and you create mixer on empty model. That is why somtimes it works and sometimes not.

(gltf)=>{} is called after model is loaded, not immediately after lader.load() exits.

Put you mixer and actions code:
(gltf)=>{ /* here */ }