解析外部模型的帧动画
本文是Three.js电子书的11.2节
本节课通过一个案例来展示Threejs如何加载并播放外部模型中的帧动画数据。
关键帧数据
如果有兴趣,你可以打开模型文件model.json
查看里面与帧动画有关的关键帧数据。
"object": {
// 绑定动画的模型名称Box
"name": "Box",
...
},
// 动画数据
"animations": [{
"name": "default",
"fps": 24,
"tracks": [
// 位置变化关键帧
{
"type": "vector3",
"name": "Box.position",
"keys": [{
"value": [0, 0, 0],
"time": 0
}, {
"value": [-100, 0, 0],
"time": 50
},...]
},
// 角度变化关键帧
{
"type": "quaternion",
"name": "Box.quaternion",
"keys": [{
"value": [0, 0, 0, 0],
"time": 0
},...]
},
// 颜色变化关键帧
{
"type": "color",
"name": "Box.material.color",
"keys": [{
"value": [1, 0, 0, 1],
"time": 20
}, ...]
}]
}]
播放模型帧动画
// 通过ObjectLoader加载模型文件model.json
var loader = new THREE.ObjectLoader();
var mixer = null; //声明一个混合器变量
// 加载文件返回一个对象obj
loader.load("model.json", function(obj) {
obj.scale.set(15, 15, 15);//缩放加载的模型
scene.add(obj);
// obj作为混合器的参数,可以播放obj包含的帧动画数据
mixer = new THREE.AnimationMixer(obj);
// obj.animations[0]:获得剪辑clip对象
// // 剪辑clip作为参数,通过混合器clipAction方法返回一个操作对象AnimationAction
var AnimationAction = mixer.clipAction(obj.animations[0]);
AnimationAction.play();
});
// 创建一个时钟对象Clock
var clock = new THREE.Clock();
// 渲染函数
function render() {
renderer.render(scene, camera); //执行渲染操作
requestAnimationFrame(render); //请求再次执行渲染函数render,渲染下一帧
if(mixer!==null){
//clock.getDelta()方法获得两帧的时间间隔
// 更新混合器相关的时间
mixer.update(clock.getDelta());
}
}
render();
播放设置
你可以通过操作AnimationAction的相关属性设置播放效果。
//不循环播放(默认是循环播放)
AnimationAction.loop = THREE.LoopOnce;
//暂停在最后一帧播放的状态
AnimationAction.clampWhenFinished=true;