机械虚拟装配案例(播放)

如果你想做一个产品、机械、建筑的虚拟装配动画，可以美术先在建模软件中生成关键帧动画的数据，然后通过threejs加载模型，播放动画数据即可。

本节课用到的threejs知识点在前面几小节基本都详细说明过，你可以先尝试自己能否实现，再听课。

动画不循环播放

该案例动画是一个虚拟装配的动画，如果你不需要循环播放，可以关闭掉。

const clipAction = mixer.clipAction(clip);
//不循环播放
clipAction.loop = THREE.LoopOnce; 

动画开始设置暂停

执行.play()动画默认播放，在按钮控制播放暂停之前，可以先设置.paused = true动画预先暂停。

const clipAction = mixer.clipAction(clip); //创建动画clipAction对象
clipAction.play(); //播放动画
clipAction.paused = true; //暂停状态

按钮控制虚拟装配播放、暂停

<div id="bu" class="bu">播放</div>

.paused默认值false，动画正常执行，如果你想暂停正在执行的动画可以把.paused设置为true，对于暂停执行的动画，你把.paused设置为false，动画会接着暂停的位置继续执行。

const bu = document.getElementById('bu');
bu.addEventListener('click',function(){
    // AnimationAction.paused默认值false，设置为true，可以临时暂停动画
    if (clipAction.paused) {//暂停状态
        clipAction.paused = false;//切换为播放状态
        bu.innerHTML='暂停';// 如果改变为播放状态，按钮文字设置为“暂停”
      } else {//播放状态
        clipAction.paused = true;//切换为暂停状态
        bu.innerHTML='播放';// 如果改变为暂停状态，按钮文字设置为“播放”
      }
})

动画播放结束，按钮样式恢复到播放

动画播放完成以后，UI按钮的样式还是停留在“暂停”的状态，需要恢复到“播放”样式，提示用户，可以再次点击播放。

clipAction.loop = THREE.LoopOnce; 
// 动画播放完成事件
mixer.addEventListener('finished', function () {
    bu.innerHTML = '播放';//播放完成，按钮显示为“播放”
});

执行.reset();动画重新进入新一次执行状态，这样播放按钮可以再次使用。

// 动画播放完成事件
mixer.addEventListener('finished', function () {
    bu.innerHTML = '播放';//播放完成，按钮显示为“播放”
    clipAction.reset(); //重新开始新的动画播放
    clipAction.paused = true; //切换为暂停状态
});

拖动条控制播放倍速

import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
const gui = new GUI(); //创建GUI对象
// 0~2倍速之间调节
gui.add(clipAction, 'timeScale', 0, 2).step(0.1).name('倍速');