three.js animations are frozen

Question

I have real time game I am creating using three.js and websockets. Everything has been working beautifully until I hit a roadblock, I am running some animations but the opposing client's animations on a web page are all one fixed frame. Both the clients use the same animations so this doesn't make sense. Here is some of my code (Specifically loading and Updating animations)

Loading Function:

function AddPlayer(pid){
//pid is short for player id
    players.push({
        three: new THREE.Object3D()
    });
    //Everything loads correctly
    loader.load("Models/ybot.glb", function(gltf){
        var examp = gltf.scene;
        anim[ids.indexOf(pid)] = {idle: null, walk: null, leftPunch: null, rightPunch: null};
        players[ids.indexOf(pid)].three = examp;
        scene.add(players[ids.indexOf(pid)].three);
        mixers[ids.indexOf(pid)] = new THREE.AnimationMixer(players[ids.indexOf(pid)].three.children[0]);
        loader.load("Models/Animations/Idle.glb", function(glanim){
            var idle = glanim.animations[0];
            anim[ids.indexOf(pid)].idle = mixers[ids.indexOf(pid)].clipAction(idle);
            anim[ids.indexOf(pid)].idle.play();
        });
        loader.load("Models/Animations/Walking.glb", function(glanim){
            var walk = glanim.animations[0];
            anim[ids.indexOf(pid)].walk = mixers[ids.indexOf(pid)].clipAction(walk);
            anim[ids.indexOf(pid)].walk.play();
        });
        loader.load("Models/Animations/RightPunch.glb", function(glanim){
            var punch = glanim.animations[0];
            anim[ids.indexOf(pid)].rightPunch = mixers[ids.indexOf(pid)].clipAction(punch);
            anim[ids.indexOf(pid)].rightPunch.play();
        });
        loader.load("Models/Animations/LeftPunch.glb", function(glanim){
            var punch = glanim.animations[0];
            anim[ids.indexOf(pid)].leftPunch = mixers[ids.indexOf(pid)].clipAction(punch);
            anim[ids.indexOf(pid)].leftPunch.play();
        });
    });
}

Update function:

function UpdateAnim(){
    for (var i = 0; i < players.length; i++) {
        if (currAnim[i] == "idle"){
            anim[i].idle.weight += 0.1;
            anim[i].walk.weight -= 0.1;
            if (anim[i].idle.weight >= 1){
                anim[i].idle.weight = 1;
                anim[i].walk.weight = 0;
            }
        }else if (currAnim[i] == "walk"){
            anim[i].idle.weight -= 0.1;
            anim[i].walk.weight += 0.1;
            if (anim[i].walk.weight >= 1){
                anim[i].idle.weight = 0;
                anim[i].walk.weight = 1;
            }
        }
        mixers[i].update(clock.getDelta());
    }
}

I'm sorry if any of the variable names make it hard to understand.

Argentum Manus Argentum Manus · Accepted Answer · 2019-04-18T18:48:25

I found what was wrong. When I called clock.getDelta(); in my update function, calling that again on all animatable objects caused a problem, so I put clock.getDelta(); into it's own variable.

function UpdateAnim(){
    var delta = clock.getDelta();
    for (var i = 0; i < players.length; i++) {
        if (currAnim[i] == "idle"){
            anim[i].idle.weight += 0.1;
            anim[i].walk.weight -= 0.1;
            if (anim[i].idle.weight >= 1){
                anim[i].idle.weight = 1;
                anim[i].walk.weight = 0;
            }
        }else if (currAnim[i] == "walk"){
            anim[i].idle.weight -= 0.1;
            anim[i].walk.weight += 0.1;
            if (anim[i].walk.weight >= 1){
                anim[i].idle.weight = 0;
                anim[i].walk.weight = 1;
            }
        }
        mixers[i].update(delta);
    }
}

three.js animations are frozen

1 Answers