Three.js - 剝皮的骨骼網格實例，動畫和混合

Question

我正在研究一個小型多人遊戲，其中有一個單人皮膚玩家網格，許多玩家使用它。 一些背景：我試過通過maya和blender collada導出加載。兩者似乎都引用了某種形式的動畫數據，但我無法使其工作。我已經嘗試過Maya JSON導出器，它只用一條材質線就吐出小小的1k文件。最後，攪拌機JSON出口商工作。所以，現在Model with bones animation (blender export) animating incorrectly in three.js

我有一個geometry對象，從JSON加載器materials陣列：對於那些還試圖加載蒙皮網格，我發現這非常有幫助。

我可以在材料上設置skinning=true，創建一個THREE.SkinnedMesh，將其添加到現場，通過THREE.AnimationHandler.add添加動畫（我在什麼AnimationHandler實際上做還不是很清楚），創建一個THREE.Animation，叫play()和update(dt) 。最後，我有一個單一的網格和一個動畫在我的場景中播放。

現在我想這些是什麼？

1. 許多情況下 - 我想不止一個球員的典範在我的現場跑來跑去。

   • 我不希望加載多次相同的網格和動畫數據。
   • 動畫時間應該是每個實例（所以它們並非全部同步動畫）。

   我應該創建同一型號許多THREE.SkinnedMesh和THREE.Animation？ THREE.AnimationHandler在哪裏？

2. 許多動畫 - 我想要空閒/運行週期能夠單獨播放。

   AFAIK只有一個動畫關鍵幀的時間線。 Three.js如何爲我分區，還是我必須手動執行？

3. 動畫混合 - 當角色停止運行，並與空閒動畫仍然有效，我不想從一個到另一個瞬間捕捉。我想暫停運行動畫並將該狀態混合回空閒動畫中。

   這是目前可能與蒙皮網格（不變形目標）？有沒有關於這個的例子或文檔？

任何信息將不勝感激，即使只是在正確的方向微調。 我沒有完整的教程，我想了解一些關於這些功能的更高級別的信息。

我可以高興地落實和，但我希望讓我開始對threejs剝皮和動畫框架的一些信息/描述文檔。例如，this並不多。

[編輯]
謝謝，@NishchitDhanani，這個頁面是相當不錯的，但沒有提及多個動畫或混合骨骼動畫：http://chimera.labs.oreilly.com/books/1234000000802/ch05.html#animating_characters_with_skinning

本頁面說多個動畫仍然是一個問題，當前但不更多（在評論中討論了一點）： http://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/

目前的答案是...

1. 使用許多THREE.SkinnedMesh，仍然不確定約THREE.AnimationHandler。
2. 不知道。也許有辦法在THREE.Animation中手動修改開始/結束關鍵幀。
3. 未執行AFAIK。我可能會嘗試創建一個自定義着色器，它可以使用兩個THREE.Animation s並在它們之間進行插值。

Answer 1

從版本67（2014年4月）開始，支持骨骼動畫混合和多個動畫。您仍然需要爲每個模型創建一個SkinnedMesh。AnimationHandler負責每幀更新（滴答）動畫，因此您應該在此處調用更新，而不是在每個Animation上手動更新。

看到新添加的例子：webgl_animation_skinning_blending.html或看看這裏幾個我自己的：

Basic Character Controller (with time warped speed blend)

Time Warped Speed Blend

Answer 2

我已經能夠通過使用單獨定製功能與JSON裝載每個模型創建單獨的蒙皮網格同時部署具有攪拌機創建和導出爲JSON文件的四種不同的動畫模型。我的四個模型中的每一個都有不同的網格，動畫，紋理和關鍵幀數量。

var loader = new THREE.JSONLoader(); 
loader.load("model_1.js", createSkinnedMeshforModel_1); 
loader.load("model_2.js", createSkinnedMeshforModel_2); 
loader.load("model_3.js", createSkinnedMeshforModel_3); 

... 

var animations = []; 

function createSkinnedMeshforModel_1(geometry, materials) 
{ 
    var myModel1, animation; 
    THREE.AnimationHandler.add(geometry.animation); 
    myModel1 = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials)); 
    enableSkinning(myModel1); 
    scene.add(myModel1); 
    animation = new THREE.Animation(myModel1, Model1_Animation_title, THREE.AnimationHandler.CATMULLROM); 
    animations.push(animation); 
    for(var i = 0; i < animations.length; i ++) 
    { 
    animations[ i ].play(); 
    } 
} 


function createSkinnedMeshforModel_2(geometry, materials) 
{ 
    var myModel2, animation; 
    THREE.AnimationHandler.add(geometry.animation); 
    myModel2 = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials)); 
    enableSkinning(myModel2); 
    scene.add(myModel2); 
    animation = new THREE.Animation(myModel2, Model2_Animation_title, THREE.AnimationHandler.CATMULLROM); 
    animations.push(animation); 
    for(var i = 0; i < animations.length; i ++) 
    { 
    animations[ i ].play(); 
    } 
} 

function createSkinnedMeshforModel_3(geometry, materials) 
{ 
    var myModel3, animation; 
    THREE.AnimationHandler.add(geometry.animation); 
    myModel3 = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials)); 
    enableSkinning(myModel3); 
    scene.add(myModel3); 
    animation = new THREE.Animation(myModel3, Model3_Animation_title, THREE.AnimationHandler.CATMULLROM); 
    animations.push(animation); 
    for(var i = 0; i < animations.length; i ++) 
    { 
    animations[ i ].play(); 
    } 
} 

的enableSkinning（）函數是相同DEVMATRIX's really helpful tutorial

提供的一項所述的「Modelx_Animation_title」變量內攪拌機中定義並由三複制到模型的導出JSON文件中的動畫標題名稱。 js攪拌機出口商。

當我加載給定模型的多個副本時，它們最初在同步中生成動畫。不過，在開始播放之前，我可以通過單獨暫停每個模型一段短暫的隨機時間，讓它們動畫不同步。每個模型的動畫從它們暫停的幀中恢復。

animations[ i ].pause(); 
... (random delay) ... 
animations[ i ].play(); 

也許這種做法提供了各種各樣的解決問題1，可能回答問題2

關於問題2，three.js所釋放的R62更新攪拌機出口，讓「導出多個動作」。雖然我還沒有嘗試過，但也許這可能允許加載給定模型的兩個或更多個副本，同時指定不同動作的動畫標題。當需要採取不同的行動時，可以將模型交換到視圖之外或交換出視圖。

如果這樣，那麼問題3的一個可能的解決方案可能是在Blender中創建一個額外的動畫動作，將模型從活動狀態混合到閒置狀態。

Answer 3

@Xealgo：有對瑪雅新的出口，做骨骼和動畫。我很想在幾個月前，我被迫使用Blender工作流程之前。 :)

這裏有一個鏈接：https://github.com/mrdoob/three.js/tree/dev/utils/exporters/maya