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

上一篇:ThreeJS教程:解析外部模型关键帧动画 (mvrlink.com)

下一篇:ThreeJS教程:虚拟装配(任意时间定位) (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号