使用 Three.js 加载带动画的 GLTF 模型，使用 AnimationMixer 播放模型动画，支持单动画和多动画同时播放。

function modelAnimationPlay(group) {
    const clock = new THREE.Clock();
    const mixer = new THREE.AnimationMixer(group);

    group.mixerAnimateRender = () => {
        const deltaTime = clock.getDelta();
        mixer.update(deltaTime);
    };

    const actions = group.actionIndexs
        .map((i, k) => {
            if (i) {
                const animationAction = mixer.clipAction(group.animations[k]);
                animationAction.loop = THREE.LoopRepeat;
                animationAction.time = 0;
                animationAction.timeScale = 1; // 播放速度
                animationAction.clampWhenFinished = true; // 停留到最后一帧
                animationAction.play();
                return animationAction;
            }
        })
        .filter((i) => i);

    !mixerFrames.find((i) => i === group) && mixerFrames.push(group);

    return { actions, mixer };
}

const createModeAnimates = (model) => {
    model.animations.forEach((_, k) => {
        gui.add({
            fn: () => {
                model.actionIndexs.forEach((_, _k, arr) => (arr[_k] = _k === k));
                modelAnimationPlay(model, model.animations);
            },
        }, "fn").name(`单动画${k}`);
    });

    gui.add({
        fn: () => {
            const _actions = [1, 2]; // 同时播放 第三个和第四个动画
            model.actionIndexs.forEach((_, k, arr) => (arr[k] = _actions.includes(k)));
            const { actions } = modelAnimationPlay(model, model.animations);
            setTimeout(() => actions.forEach((v) => v.stop()), 4000);
        },
    }, "fn").name("1, 2动画同时播放");
};

function animate() {
    requestAnimationFrame(animate);
    mixerFrames.forEach((i) => i?.mixerAnimateRender?.());
    renderer.render(scene, camera);
}