加载外部模型骨骼动画

上节课是通过Threejs程序创建一个骨骼动画然后解析播放，本节课是加载解析一个外部的骨骼动画模型文件。

查看骨骼动画数据

在解析模型骨骼动画之前，先加载外部的三维模型，查看骨骼动画相关的数据，这样便于大家理解，关于加载外部模型文件的更多知识可以查看第14章。

// 通过加载器ObjectLoader加载./marine_anims_core.json模型文件var loader = new THREE.ObjectLoader();loader.load("./marine_anims_core.json", function(obj) {console.log(obj);//浏览器控制台查看加载返回的结果scene.add(obj); //添加到场景中})

你可以在上面回调函数中分别插入下面代码进行测试。

//从返回对象获得骨骼网格模型SkinnedMesh = obj.children[0];// 查看骨头关节Boneconsole.log(SkinnedMesh.skeleton.bones);

// 骨骼辅助显示var skeletonHelper = new THREE.SkeletonHelper(SkinnedMesh);scene.add(skeletonHelper);

// 遍历骨骼模型中的骨关节Bone，并获得世界坐标SkinnedMesh.traverse(function(elem) {if (elem.type === 'Bone') {console.log(elem.getWorldPosition(new THREE.Vector3()));}});

解析渲染骨骼动画

下面关于骨骼动画解析的代码如果不是很理解，可以回一下第11章关于帧动画的详解讲解。

var loader = new THREE.ObjectLoader(); //创建一个加载器var mixer = null; //声明一个混合器变量loader.load("./marine_anims_core.json", function(obj) {scene.add(obj); //添加到场景中//从返回对象获得骨骼网格模型var SkinnedMesh = obj.children[0];//骨骼网格模型作为参数创建一个混合器mixer = new THREE.AnimationMixer(SkinnedMesh);// 查看骨骼网格模型的帧动画数据// console.log(SkinnedMesh.geometry.animations)// 解析跑步状态对应剪辑对象clip中的关键帧数据var AnimationAction = mixer.clipAction(SkinnedMesh.geometry.animations[1]);// 解析步行状态对应剪辑对象clip中的关键帧数据// var AnimationAction = mixer.clipAction(SkinnedMesh.geometry.animations[3]);AnimationAction.play();// 骨骼辅助显示// var skeletonHelper = new THREE.SkeletonHelper(SkinnedMesh);// scene.add(skeletonHelper);})

// 创建一个时钟对象Clockvar clock = new THREE.Clock();// 渲染函数function render() {renderer.render(scene, camera); //执行渲染操作requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧if (mixer !== null) {//clock.getDelta()方法获得两帧的时间间隔// 更新混合器相关的时间mixer.update(clock.getDelta());}}render();