Mixer issue: multiple animations do not play when switched

Questions
1

Newbie here. I’ve loaded an ,fbx character, plus additional animation clips from Mixamo. The idea is that the animations switch when a key (“Q”) is clicked. When run, the character loads and plays the first animation clip. On key press, the animation clips changes but the animation doesn’t play. Here’s where I’m currently at… character anims.

        let Actions = [];
        let action;
        let animPaths = [ "./models/T-Pose.fbx","./models/Walking.fbx","./models/Running.fbx","./models/Idle.fbx" , "./models/Dancing.fbx"];
        let pathIDs = ["t-pose","walking", "running", "idle", "dancing"];
        let moe;
        let mixer;

        
        const loader = new FBXLoader();

        loader.load("./models/T-Pose.fbx", function(object){
            object.scale.set(0.1, 0.1, 0.1);
           /* object.traverse(function(child){
                if(child.isMesh){
                    child.material = material;
                }
            })*/
            moe = object;
            moe.position.y = -70;
            mixer = new THREE.AnimationMixer(object);
            action = mixer.clipAction(object.animations[0]);
            Actions.push(action);
            //action.play();
            scene.add(object);
            loadNextAnimation(loader);
            
        });


        function loadNextAnimation(loader){
            for(let i=1;i<animPaths.length;i++){
                
                loader.load(animPaths[i], (object) =>{
                    mixer = new THREE.AnimationMixer(moe);
                    Actions.push(mixer.clipAction(object.animations[0]));
                    scene.add(object);
                    action = Actions[i];
                    mixer.stopAllAction();
                    action.play();
                })
            }
            
        }


        let i = 0;
        let fwd = true;
        document.onkeydown = function(event) {
            // 81 = q
            
            if(event.keyCode == 81){
                if(i < 1) fwd = true;
                if(i > Actions.length) fwd = false;
                if(fwd){
                    i++;
                }else{
                    i--;
                }
                
                action = Actions[i];
                mixer.stopAllAction();
                //mixer.reset();
                action.play();
                
                console.log("i = " + i);
                console.log(animPaths[i]);
                document.getElementById("testtext").value = "currentClip = "+pathIDs[i];
                animate();
            }
        };

I’ve spent the past several days poring over online mixer tutes, but I can’t identify what I’m screwing up. Any help would be appreciated.

2

From what I can see… You are creating a new AnimationMixer for every animation that is being loaded, effectively overwriting the previous instance of AnimationMixer. So only the animation that was loaded last will work.

3

That did it! Many thanks, Harold!

1 Like