Three.js 开启带动画模型的动画

步骤

1. 绑定需要动画的mash ​​mixer = new THREE.AnimationMixer(mash)​​
2. ​​mixer.clipAction( animate )​​
3. 调用 ​​.play()​​方法
4. 循环更新

解析后的模型动画一起开启可参考这篇​​three.js 播放模型中的多个动画three.js 播放模型中的多个动画​​

如果某动画只需要播放一次
把动画拎出来 设置播放次数
code:

//动画发生在哪个物体上就绑定哪个 mash
const mixer = new THREE.AnimationMixer(mash);
const action = mixer.clipAction(gltf.animations[0])//把该物体需要的动画拿出来
action.setLoop(THREE.LoopOnce);//设置只播放一次
action.play();

//...

//在render时不断更新
const clock = new THREE.Clock()
const tick = () => {
    const time = clock.getDelta();
    if (mixer) {
        mixer.update(time);
    }
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
}
tick()

封装一下
只需传入物体和动画 就可以在规定时间内执行完毕 不会再每一帧都询问动画是否执行完 — 只适用于只播放一次的动画

function onesAnimate(mash, animate) {
    const mixer = new THREE.AnimationMixer(mash);
    const action = mixer.clipAction(animate);
    action.setLoop(THREE.LoopOnce);
    action.play();
    console.log(action.time)
    const clip = action.getClip();
    console.log("clip.time")
    const duration = clip.duration;
    console.log(clip.duration)
    const clock = new THREE.Clock();
    let sum = 0;

    //循环更新
    const run = () => {
        if (sum > duration) return;
        window.requestAnimationFrame(run)
        const t = clock.getDelta();
        sum += t;
        console.log(sum);
        mixer.update(t);
    }
    run();
}

---