Three.js动画播放到最后一帧后停顿的原因及平滑播放解决方案

效果对比：

问题原因 #

• 动画剪辑首尾帧重复：Blender制作循环动画时，通常会将最后一帧设置为和第一帧完全一致的状态，导出GLTF后，循环播放时会连续出现两次相同帧，产生停顿感。
• 动画动作配置缺失：未显式指定循环模式与结束后行为，Three.js默认参数在部分场景下会出现循环切换帧的间隔异常。
• 多余渲染调用：加载完成后单独调用的render()与animate循环中的渲染逻辑冲突，可能引发首帧动画时序异常。

解决方法 #

1. 调整Blender导出设置 #

导出GLTF/GLB前，删除动画轨道的最后一帧重复帧，例如动画长度为0-60帧，将导出的动画范围设置为0-59帧，保证最后一帧和第一帧的状态自然衔接，无重复。

2. 修改Three.js动画配置代码 #

调整动画动作的循环参数，删除多余的渲染调用，修改后完整代码如下：

var mixers = [];
var clock = new THREE.Clock();

loader.load('models/gltf/shuilunji0820.glb', function (gltf) {
    gltf.scene.position.y = 90;
    scene.add(gltf.scene);

    var mixer = new THREE.AnimationMixer(gltf.scene.children[2]);
    // 显式配置动画动作参数
    const action = mixer.clipAction(gltf.animations[1]);
    action.setDuration(2)
          .setLoop(THREE.LoopRepeat, Infinity)
    action.clampWhenFinished = false;
    action.reset().play();
    mixers.push(mixer);
});

var animate = function () {
    requestAnimationFrame(animate);
    var delta = clock.getDelta();
    
    for (var i = 0; i < mixers.length; i++) {
        mixers[i].update(delta);
    }

    renderer.render(scene, camera);
};
animate();

3. 可选优化：裁剪动画剪辑消除残留停顿 #

如果调整后仍有轻微停顿，可手动裁剪动画剪辑的末尾冗余帧时长，适配Blender导出的帧率（代码中24替换为你的Blender动画实际帧率即可）：

// 放在创建action之前执行
gltf.animations[1].duration -= 1 / 24;

内容的提问来源于stack exchange，提问作者light