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

上一篇:ThreeJS教程:动画播放(暂停、倍速、循环) (mvrlink.com)

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

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