three.js骨骼动画不同动作切换

参考资料：threejs中文网

threejs qq交流群：814702116

three.js骨骼动画不同动作切换

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