WEBGL学习笔记（五）：让三维模型动起来
游戏已经做好，但是博客园不能支持哈，我在我的独立博客里面加入了这个游戏。
加载时候会黑屏，等待数秒即可，点击这里体验试玩：FlappyBird3d游戏试玩
前面说过，通过control实现动态效果，但只是通过鼠标等设备与用户进行交互的使用。
如想做出人物行走，奔跑这样的复杂动作，显然不是用control类来实现的。
看下面的代码
var loader = new THREE.JSONLoader();
loader.load( "models/animated/flamingo.js", function( geometry ) {
geometry.computeVertexNormals();
geometry.computeMorphNormals();
var material = new THREE.MeshPhongMaterial( {
color: 0xffffff,
morphTargets: true,
morphNormals: true,
vertexColors: THREE.FaceColors,
shading: THREE.SmoothShading
} );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 150;
mesh.position.y = 150;
mesh.scale.set( 1.5, 1.5, 1.5 );
scene.add( mesh );
mixer = new THREE.AnimationMixer(mesh);
mixer.clipAction(geometry.animations[0]).setDuration(1).play();
通过loader类加载了一个js格式的3d模型，这里很好理解。定义材料，提供给mesh。顺便说一下geometry，material，mesh之间的关系。
geo是loader加载得到，mater可以是颜色，贴图等等，mesh就是最终显示在scene中的模型了，geometry和material组成了mesh。
重点在于这句话
mixer = new THREE.AnimationMixer(mesh);
这个THREE.AnimationMixer是什么，通过名字可以看出是混合，为了弄清楚，我们打开这个3d模型js文件。看到代码如下：
"vertices": [0,101,79,0,55,189,0,-80,-186,0,88,-85,-110,-66,-79,1,-50,328,-25,-14
"morphTargets": [
{ "name": "flamingo_flyA_000", "vertices": [0,101,79,0,55,189,0,-80,-186,0,88,-85,-
{ "name": "flamingo_flyA_001", "vertices": [0,112,79,0,65,189,0,-69,-186,0,99,-84,-
{ "name": "flamingo_flyA_002", "vertices": [0,121,80,0,73,189,0,-58,-186,0,109,-84,
{ "name": "flamingo_flyA_003", "vertices": [0,121,82,0,72,190,0,-55,-187,0,111,-82,
{ "name": "flamingo_flyA_004", "vertices": [0,112,83,0,63,191,0,-60,-188,0,105,-81,
{ "name": "flamingo_flyA_005", "vertices": [0,99,84,0,48,192,0,-70,-189,0,94,-80,-1
{ "name": "flamingo_flyA_006", "vertices": [0,84,85,0,32,192,0,-83,-189,0,80,-79,-1
{ "name": "flamingo_flyA_007", "vertices": [0,68,86,0,16,192,0,-97,-189,0,65,-78,-1
{ "name": "flamingo_flyA_008", "vertices": [0,56,86,0,3,192,0,-111,-189,0,51,-79,-1
{ "name": "flamingo_flyA_009", "vertices": [0,48,85,0,-2,192,0,-121,-189,0,42,-80,-
{ "name": "flamingo_flyA_010", "vertices": [0,48,83,0,-1,191,0,-124,-188,0,41,-81,-
{ "name": "flamingo_flyA_011", "vertices": [0,57,82,0,9,190,0,-118,-187,0,48,-82,-1
{ "name": "flamingo_flyA_012", "vertices": [0,72,81,0,25,190,0,-106,-187,0,61,-83,-
{ "name": "flamingo_flyA_013", "vertices": [0,89,80,0,42,189,0,-92,-186,0,76,-84,-1
],
morph的意思是变形，3d人物动作基本都是通过变形。看到这里是不是可以理解为，这个模型具有的morphTargets类，下面有多个变形目标，分别是原始mesh\’的变形。
就是说，这个3d模型定义了flamingo_flyA_000~flamingo_flyA_014一共14个动作，这样就好理解了，3d就是通过这14个动作的切换来实现。
所以mixer是一个类，这个类可以识别出morphTargets下面的属性，并且具有一些方法，比如上面
mixer.clipAction(geometry.animations[0]).setDuration(1).play();
意思就很明显了，clipaction就是切换动作的意思，setduration（1）播放从开始到结束速度设置为1秒（居然是秒为单位），play方法是播放，很好理解，播放动画。
虽然整个过程看起来特别简单，定义一个类然后使用类的方法就可以了，但是你的3d模型必须具有morphTargets属性才可以的，也就是说~~
在做3d模型的时候，进行变形处理，并将结果保存，一般都是建立骨架然后拖拽什么的就行了，很多软件都可以，不负责任的说，我没试过！！
所以说要么自己做3d模型，要么使用现成的，才可以实现任务骨架移动的效果啊。
附上链接~
https://github.com/mrdoob/three.js/blob/master/examples/webgl_morphnormals.html