ThreeJS教程：机械虚拟装配案例(播放)
推荐：将NSDT场景编辑器加入你的3D工具链
3D工具集：NSDT简石数字孪生
机械虚拟装配案例(播放)
如果你想做一个产品、机械、建筑的虚拟装配动画，可以美术先在建模软件中生成关键帧动画的数据，然后通过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('倍速');