Three.js GLTF动画重复且播放过快问题求助

核心问题 #

• AnimationMixer初始化错误：提前创建空的AnimationMixer，未绑定目标模型，导致动画上下文混乱。
• 时间差累积：模型加载完成前，动画循环已持续调用mixer.update(clock.getDelta())，空调用会累积大量未处理的时间差，导致模型加载后动画瞬间加速。

修复方案 #

1. 将AnimationMixer的创建移至模型加载成功的回调内，绑定到加载的模型对象
2. 仅在mixer实例存在时执行动画更新，避免空调用累积时间差
3. 可选：通过setEffectiveTimeScale调整动画播放速度

修正后的代码 #

// Model
const loader = new GLTFLoader();
let mixer = null; // 先声明空变量，加载完成后赋值

// Load a glTF resource
loader.load(
    '/Windy/scene.gltf',
    function (gltf) {
        const model = gltf.scene;
        scene.add(model);

        // 加载完成后创建绑定到模型的AnimationMixer
        mixer = new THREE.AnimationMixer(model);

        const animationClip = gltf.animations[0];
        console.log(animationClip);

        const action = mixer.clipAction(animationClip);
        action.play();
        // 若需要调整速度，可添加此行：action.setEffectiveTimeScale(0.8);
    },
);

const clock = new THREE.Clock();

const animation = () => {
    controls.update();
    // 仅当mixer存在时更新动画
    if (mixer) {
        mixer.update(clock.getDelta());
    }
    renderer.render(scene, camera);
    window.requestAnimationFrame(animation);
};

animation();

额外检查项 #

• 确认canvas容器的CSS样式，避免设置background-repeat等可能导致画面重复的属性

内容的提问来源于stack exchange，提问作者Carlos Henrique R. Pereira