6. 虚拟装配(任意时间定位)
# 虚拟装配(任意时间定位)
继续上节课关于虚拟装配动画的讲解,增加一个拖动条,用来查看任意时间模型动画状态。
关于关键帧动画,通过拖动条查看动画任意时间状态的方法,前面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 = '播放'; //修改按钮样式
}
});