推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

虚拟装配(任意时间定位)

继续上节课关于虚拟装配动画的讲解，增加一个拖动条，用来查看任意时间模型动画状态。

关于关键帧动画，通过拖动条查看动画任意时间状态的方法，前面16.3小节讲解过，可以直接参考。

属性.duration获取动画默认的执行时间

如果你不知道关键帧动画的执行时间，可以通过加载模型返回对象AnimationClip的.duration属性获得。

const clip = gltf.animations[0];
const duration = clip.duration;//默认持续时间

拖动条查看任意时间动画状态

import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
const gui = new GUI(); //创建GUI对象

clipAction.paused = true;//暂停状态拖动拖动条

// 拖动条查看动画任何时刻模型状态
gui.add(clipAction,'time',0,duration).step(0.1).name('拖动');

拖动条与播放按钮功能组合

如果动画刚好处于播放状态，你拖动拖动条，会受到动画播放的影响，可以通过代码暂停动画。

播放状态，按钮显示文字是“暂停”，把按钮样式也更改下。

// 拖动条查看动画任何时刻模型状态
gui.add(clipAction, 'time', 0, duration).step(0.1).name('拖动').onChange(function () {
    //如果动画处于播放状态会影响拖动条时间定位
    if (!clipAction.paused){
        clipAction.paused = true; //切换为暂停状态
        bu.innerHTML = '播放'; //修改按钮样式
    }
});

上一篇：ThreeJS教程：机械虚拟装配案例(播放) (mvrlink.com)

下一篇：ThreeJS教程：变形动画原理 (mvrlink.com)