three.js 播放模型中的多个动画

​​main​​ 创建mixer 为mixer添加动画 AnimationClip

const mixer = new THREE.AnimationMixer(gltf.scene);
mixer.clipAction(animate).setLoop(THREE.LoopOnce).play()

逻辑

const clock = new THREE.Clock();
const mixer = new THREE.AnimationMixer(gltf.scene);
let maxDuration = 0;

gltf.animations.forEach((animate) => {
    const duration = mixer.clipAction(animate).setLoop(THREE.LoopOnce).play().getClip().duration;
    if (duration > maxDuration) maxDuration = duration;
})

console.log('max duration:', maxDuration);

let sum = 0;
const animate = () => {
    if (sum > maxDuration) return;
    timer = requestAnimationFrame(animate);
    const t = clock.getDelta();
    sum += t;
    mixer.update(t);
};
animate();

简单的播放器案例

function AnimationPlayer() {
    let timer = 0;

    const stop = () => {
        cancelAnimationFrame(timer);
    }

    function start(gltf) {
        stop();
        const clock = new THREE.Clock();
        const mixer = new THREE.AnimationMixer(gltf.scene);
        let maxDuration = 0;

        gltf.animations.forEach((animate) => {
            const duration = mixer.clipAction(animate).setLoop(THREE.LoopOnce).play().getClip().duration;
            if (duration > maxDuration) maxDuration = duration;
        })

        console.log('max duration:', maxDuration);

        let sum = 0;
        const animate = () => {
            if (sum > maxDuration) return;
            timer = requestAnimationFrame(animate);
            const t = clock.getDelta();
            sum += t;
            mixer.update(t);
        };
        animate();
    }

    return { start, stop };
}