Three.jsスキンスケルトンメッシュインスタンス、アニメーション、ブレンディング

Question

私は、それを使用する多くのプレーヤーを持つ単一のスキンプレーヤーメッシュを持つ小さなマルチプレイヤーゲームに取り組んでいます。 背景：私はmayaとblender collada exportを使って読み込みを試みました。両方とも何らかの形のアニメーションデータを参照しているようですが、動作させることができませんでした。私はMaya JSONエクスポータを試しました。これは、マテリアルラインだけを使って小さな1kファイルを吐き出します。最後に、Blenderの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アニメーションキーフレームのタイムラインは1つだけです。 Three.jsはこれをどのように分割するのですか、それとも手動で行う必要がありますか？

3. アニメーションブレンディング - 文字は、実行を停止してアイドルアニメーションで静止すると、私は一方から他方へのインスタントスナップを望んでいません。私は実行アニメーションを一時停止し、その状態をアイドルアニメーションに戻したいと思います。

   現在、スキンメッシュ（モーフターゲットではありません）ではこれが可能ですか？これに関する例や文書はありますか？

いずれの情報も、正しく正しい方向に微調整していただければ幸いです。 私は完全なチュートリアルの後ではありません、これらの機能に関するいくつかのより高いレベルの情報が欲しいです。

私は喜んと3を実装することもできますが、私はスキニングthreejsとアニメーションフレームワークに関するいくつかの情報/記述ドキュメントは、私が始めるにしたいと思います。たとえば、thisはそれほど多くはありません。

[EDIT]
おかげで、@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は実装されていません。私は2つのTHREE.Animationを取り、それらの間を補間するカスタムシェーダを作成しようとするかもしれません。

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ファイルとしてブレンダーを使用して作成し、エクスポートした4種類のアニメーションモデルを展開することができました。私の4つのモデルは、メッシュ、アニメーション、テクスチャ、キーフレームの数がそれぞれ異なります。

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 Blenderの輸出者。

特定のモデルの複数のコピーを読み込むとき、最初に同期でアニメーション化されます。しかし私は、再生を再開する前に短いモデルで個々のモデルを個別に一時停止させることで、アニメーションを同期させることができました。個々のモデルのアニメーションは、一時停止したフレームから再開します。このアプローチは1に疑問を種類のソリューションを提供し、そしておそらく質問2に関して2.

に疑問をおそらく、Three.jsリリースR62は、「エクスポート複数のアクションを許可するようにBlenderの輸出を更新

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

"私はそれを試していないかもしれませんが、これは、異なるアクションのアニメーションタイトルを指定しながら、与えられたモデルの2つ以上のコピーをロードすることを可能にするかもしれません。異なるアクションが必要なときに、モデルをビューの内外に入れ替えることができます。

質問3の可能な解決策は、モデルをアクティブ状態からアイドル状態にブレンドする追加のアニメーションアクションを作成することです。

Answer 3

@Xealgo：ないマヤのための新たな輸出国はありますがボーンズ、アニメーションも同様です。 Blenderのワークフローを余儀なくされる前に、私は数ヶ月前にそれをしたいと思っています。 :)ここで

のリンクです：https://github.com/mrdoob/three.js/tree/dev/utils/exporters/maya