ThreeJS教程:骨骼动画不同动作切换
推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生
骨骼动画不同动作切换
Three.js实际开发时候,有时候需要需要切换不同动作的动画。比如一个人从休息状态切换为跑步状态,从走路状态切换为休息状态。
查看人骨骼动画几组动画数据
课件中gltf模型gltf.animations
包含四个关键帧动画对象AnimationClip
,分别对应休息、跑步等动作。
console.log('控制台查看gltf对象结构', gltf);
// gltf.animations[0] Idle 休息
// gltf.animations[1] Run 跑步
// gltf.animations[2] TPose T形静止展开
// gltf.animations[3] Walk 走路
const mixer = new THREE.AnimationMixer(gltf.scene);
const clipAction = mixer.clipAction(gltf.animations[3]);//走路
切换动画不同动作(.play()
和.stop()
)
点击下面按钮切换骨骼动画的不同动作。
<div id="Idle" class="bu">休息</div>
<div id="Run" class="bu" style="margin-left: 10px;">跑步</div>
<div id="Walk" class="bu" style="margin-left: 10px;">走路</div>
点击按钮,按钮对应的动作对象AnimationAction
,执行.play()
方法开始动画执行,原来执行中的动画动作对象,执行.stop()
方法终止执行。
const IdleAction = mixer.clipAction(gltf.animations[0]);
const RunAction = mixer.clipAction(gltf.animations[1]);
const WalkAction = mixer.clipAction(gltf.animations[3]);
IdleAction.play();
let ActionState = IdleAction;//当前处于播放状态的动画动作对象
// 通过UI按钮控制,切换动画运动状态
document.getElementById('Idle').addEventListener('click', function () {
ActionState.stop();//播放状态动画终止
IdleAction.play();
ActionState = IdleAction;
})
document.getElementById('Run').addEventListener('click', function () {
ActionState.stop();//播放状态动画终止
RunAction.play();
ActionState = RunAction;
})
document.getElementById('Walk').addEventListener('click', function () {
ActionState.stop();//播放状态动画终止
WalkAction.play();
ActionState = WalkAction;
})
AnimationAction
的权重属性.weight
骨骼动画的多个动画动作对象同时播放,会共同作用于人的骨骼动画。
const IdleAction = mixer.clipAction(gltf.animations[0]);
const RunAction = mixer.clipAction(gltf.animations[1]);
const WalkAction = mixer.clipAction(gltf.animations[3]);
IdleAction.play();
RunAction.play();
WalkAction.play();
动画动作对象AnimationAction
的权重属性.weight
可以控制动画的执行,权重为0,对应动画不影响人的动作,权重为1影响程度最大。
// 跑步和走路动画对人影响程度为0,人处于休闲状态
IdleAction.weight = 1.0;
RunAction.weight = 0.0;
WalkAction.weight = 0.0;
切换动画不同动作(.weight
)
点击按钮切换骨骼动画的不同动作。
const mixer = new THREE.AnimationMixer(gltf.scene);
const IdleAction = mixer.clipAction(gltf.animations[0]);
const RunAction = mixer.clipAction(gltf.animations[1]);
const WalkAction = mixer.clipAction(gltf.animations[3]);
IdleAction.play();
RunAction.play();
WalkAction.play();
// 跑步和走路动画对人影响程度为0,人处于休闲状态
IdleAction.weight = 1.0;
RunAction.weight = 0.0;
WalkAction.weight = 0.0;
let ActionState = IdleAction;//标记当前处于播放状态的动画动作对象
// 通过UI按钮控制,切换动画运动状态
document.getElementById('Idle').addEventListener('click', function () {
ActionState.weight = 0.0;//播放状态动画权重设置为0
IdleAction.weight = 1.0;
ActionState = IdleAction;
})
document.getElementById('Run').addEventListener('click', function () {
ActionState.weight = 0.0;//播放状态动画权重设置为0
RunAction.weight = 1.0;
ActionState = RunAction;
})
document.getElementById('Walk').addEventListener('click', function () {
ActionState.weight = 0.0;//播放状态动画权重设置为0
WalkAction.weight = 1.0;
ActionState = WalkAction;
})