three.js动画被冻结

Question

我有实时游戏，我正在创建使用three.js和websockets。一切都运行得很好，直到我遇到了一个障碍，我正在运行一些动画，但网页上对方客户的动画都是一个固定的帧。两个客户端都使用相同的动画，因此这是没有意义的。下面是我的一些代码(特别是加载和更新动画)

加载函数：

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();
        });
    });
}

更新函数：

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());
    }
}

如果有任何变量名称让人难以理解，我很抱歉。

Answer 1

我发现了问题所在。当我在我的更新函数中调用clock.getDelta();时，在所有可动画对象上再次调用它会导致问题，所以我将clock.getDelta();放入它自己的变量中。

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);
    }
}