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;
})