ThreeJS教程：动画播放(拖动任意时间状态)
在线工具推荐：3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器
动画播放（拖动任意时间状态）
如果你想了解，关键帧动画在特定时间段播放，或者把动画定位在时间轴上任何一个时刻，或者借助UI拖动条，拖动查看关键帧任何时刻的状态，可以学习本节课。
控制动画播放特定时间段
AnimationClip参数2设置为6，执行AnimationAction.play(),默认播放0~6秒之间的关键帧动画。AnimationClip参数2的值会作为自身.duration属性的值。
const clip = new THREE.AnimationClip("test", 6, [posKF, colorKF]);
console.log('clip.duration',clip.duration);
从时间轴上选择时间段播放动画，开始时刻AnimationAction.time，结束时刻AnimationClip.duration。
//AnimationAction设置开始播放时间：从1秒时刻对应动画开始播放
clipAction.time = 1;
//AnimationClip设置播放结束时间：到5秒时刻对应的动画状态停止
clip.duration = 5;
注意.loop和.clampWhenFinished对播放效果的影响,如果需要上面代码完全起作用，要设置非循环模式，同时动画播放完，物体停留在结束状态，而不是回到开始状态。
//不循环播放
clipAction.loop = THREE.LoopOnce;
// 物体状态停留在动画结束的时候
clipAction.clampWhenFinished=true;
查看时间轴上任意时间动画状态
把动画设置为暂停状态，然后你可以通过AnimationAction.time把动画定格在时间轴上任何位置。
//在暂停情况下，设置.time属性,把动画定位在任意时刻
clipAction.paused = true;
clipAction.time = 1;//物体状态为动画1秒对应状态
clipAction.time = 3;//物体状态为动画3秒对应状态
拖动条拖动显示动画任意时刻模型状态
默认是播放的，可以预先暂停，再通过拖动条控制。
//在暂停情况下，设置.time属性,把动画定位在任意时刻
clipAction.paused = true;
gui辅助快速创建一个可交互拖动条，调整模型停留在任何选定时间点状态。实际开发时候，你可以通过vue或react的UI组件库实现拖动条。
import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
const gui = new GUI(); //创建GUI对象
gui.add(clipAction, 'time', 0, 6);
设置步长
gui.add(clipAction, 'time', 0, 6).step(0.1);
动画下一步状态
//在暂停情况下，设置.time属性,把动画定位在任意时刻
clipAction.paused = true;
下一步按钮
<div id="bu" class="bu">下一步</div>
点击按钮，模型调整到time累加0.1秒对应的动画状态。
const bu = document.getElementById('bu');
bu.addEventListener('click', function () {
clipAction.time += 0.1;
})