游戲已經做好，但是博客園不能支持哈，我在我的獨立博客里面加入了這個游戲。
加載時候會黑屏，等待數秒即可，點擊這里體驗試玩：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