89 Three.js 导入dae格式的骨骼绑定动画模型

简介

上一节，我们导入了一个官方的FBX格式的骨骼模型，实现了动画效果。这一节，更换了dae格式的模型导入，主要是这个模型返回的数据和FBX的返回格式有一些区别，下面我们将在案例中解析中间的区别。

实现案例

案例查看地址：/blog/threejs/-04-24/152.html

查看上面的案例图片会发现一个跳舞的帝国士兵，同样，这个模型也是来自官网。模型引入的方式也差不多，将上一节的fbxLoader.js修改为ColladaLoader.js，然后使用loader导入模型：

//加载模型var loader = new THREE.ColladaLoader();loader.load("/lib/models/collada/stormtrooper/stormtrooper.dae", function (mesh) {console.log(mesh);});

但是我们从返回的对象里面查看，发现，并不是直接返回了一个object3D的对象，而是含有一些数据的对象：

在对象中，我们发现了scene对象，则是我们需要导入到场景中的object3D对象，而骨骼动画则直接在animations数组当中。

通过查看对象，我们查到了我们需要的数据对象，那我们经过处理，按照上一节的方式导入即可：

- 导入模型：

var obj = mesh.scene; //获取到模型对象obj.rotation.z += Math.PI; //让模型转身scene.add(obj);

创建动画：

//AnimationMixer是场景中特定对象的动画播放器。当场景中的多个对象独立动画时，可以为每个对象使用一个AnimationMixermixer = new THREE.AnimationMixer(obj);//mixer.clipAction 返回一个可以控制动画的AnimationAction对象参数需要一个AnimationClip 对象//AnimationAction.setDuration 设置一个循环所需要的时间，当前设置了一秒//告诉AnimationAction启动该动作action = mixer.clipAction(mesh.animations[0]);action.play();

总结

到了这里，我写的博客里面没有十篇也有八篇关于模型导入的案例。总结经验发现，在回调中能够获得对象回调后，不要急于赶紧将模型导入到场景当中，而是先把模型打印一下，查看一下模型的数据结构，然后根据需求获取一下再导入，会更好。所以，我们需要做的就是会调试，然后熟悉Three.js的数据结构，能够锁定出错位置，这才是根本。

到这里，关于模型动画就写到这一节了，下一节，将一起学习对纹理的处理。

案例代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style></head><body onload="draw();"></body><script src="/three.js/91/three.min.js"></script><script src="/lib/js/libs/inflate.min.js"></script><script src="/lib/js/loaders/ColladaLoader.js"></script><script src="/lib/js/controls/OrbitControls.js"></script><script src="/stats.js/r17/Stats.min.js"></script><script src="/dat-gui/0.7.1/dat.gui.min.js"></script><script src="/lib/js/Detector.js"></script><script>var renderer, camera, scene, gui, light, stats, controls, meshHelper, mixer, action;var clock = new THREE.Clock();function initRender() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0xeeeeee);renderer.shadowMap.enabled = true;//告诉渲染器需要阴影效果document.body.appendChild(renderer.domElement);}function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);camera.position.set(5, 10, 15 );}function initScene() {scene = new THREE.Scene();scene.background = new THREE.Color( 0xa0a0a0 );scene.fog = new THREE.Fog( 0xa0a0a0, 20, 100 );}//初始化dat.GUI简化试验流程function initGui() {//声明一个保存需求修改的相关数据的对象gui = {animation: true,helper:true //模型辅助线};var datGui = new dat.GUI();//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）datGui.add(gui, "animation").onChange(function (e) {if (e) {action.play();}else {action.stop();}});datGui.add(gui, "helper").onChange(function (e) {meshHelper.visible = e;})}function initLight() {scene.add(new THREE.AmbientLight(0x444444));light = new THREE.DirectionalLight(0xffffff);light.position.set(0, 20, 10 );light.castShadow = true;light.shadow.camera.top = 10;light.shadow.camera.bottom = -10;light.shadow.camera.left = -10;light.shadow.camera.right = 10;//告诉平行光需要开启阴影投射light.castShadow = true;scene.add(light);}function initModel() {//辅助工具var helper = new THREE.AxesHelper(50);scene.add(helper);// 地板var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 200, 200 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) );mesh.rotation.x = - Math.PI / 2;mesh.receiveShadow = true;scene.add( mesh );//添加地板割线var grid = new THREE.GridHelper( 200, 50, 0x000000, 0x000000 );grid.material.opacity = 0.2;grid.material.transparent = true;scene.add( grid );//加载模型var loader = new THREE.ColladaLoader();loader.load("/lib/models/collada/stormtrooper/stormtrooper.dae", function (mesh) {console.log(mesh);var obj = mesh.scene; //获取到模型对象//添加骨骼辅助meshHelper = new THREE.SkeletonHelper(obj);scene.add(meshHelper);//设置模型的每个部位都可以投影obj.traverse( function ( child ) {if ( child.isMesh ) {child.castShadow = true;child.receiveShadow = true;}} );//AnimationMixer是场景中特定对象的动画播放器。当场景中的多个对象独立动画时，可以为每个对象使用一个AnimationMixermixer = obj.mixer = new THREE.AnimationMixer(obj);//mixer.clipAction 返回一个可以控制动画的AnimationAction对象参数需要一个AnimationClip 对象//AnimationAction.setDuration 设置一个循环所需要的时间，当前设置了一秒//告诉AnimationAction启动该动作action = mixer.clipAction(mesh.animations[0]);action.play();obj.rotation.z += Math.PI;scene.add(obj);});}//初始化性能插件function initStats() {stats = new Stats();document.body.appendChild(stats.dom);}function initControls() {controls = new THREE.OrbitControls(camera, renderer.domElement);//设置控制器的中心点//controls.target.set( 0, 100, 0 );// 如果使用animate方法时，将此函数删除//controls.addEventListener( 'change', render );// 使动画循环使用时阻尼或自转意思是否有惯性controls.enableDamping = true;//动态阻尼系数就是鼠标拖拽旋转灵敏度//controls.dampingFactor = 0.25;//是否可以缩放controls.enableZoom = true;//是否自动旋转controls.autoRotate = false;controls.autoRotateSpeed = 0.5;//设置相机距离原点的最远距离controls.minDistance = 1;//设置相机距离原点的最远距离controls.maxDistance = 2000;//是否开启右键拖拽controls.enablePan = true;}function render() {var time = clock.getDelta();if (mixer) {mixer.update(time);}controls.update();}//窗口变动触发的函数function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}function animate() {//更新控制器render();//更新性能插件stats.update();renderer.render(scene, camera);requestAnimationFrame(animate);}function draw() {//兼容性判断if (!Detector.webgl) Detector.addGetWebGLMessage();initGui();initRender();initScene();initCamera();initLight();initModel();initControls();initStats();animate();window.onresize = onWindowResize;}</script></html>