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('倍速');