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