web-dev-qa-db-ja.com

Three.js-スキンされた骨格メッシュインスタンス、アニメーション、およびブレンディング

私は、単一のスキンプレーヤーメッシュとそれを使用する多くのプレーヤーを持つ小さなマルチプレーヤーゲームに取り組んでいます。 いくつかの背景：mayaとblendercolladaのエクスポートを介してロードしてみました。どちらも何らかのアニメーションデータを参照しているようですが、機能させることができませんでした。私はmayaJSONエクスポーターを試しました。これは、マテリアル行のみで小さな1kファイルを吐き出します。最後に、BlenderJSONエクスポーターが機能しました。スキンメッシュをロードしようとしている人にとっても、これは非常に役立つことがわかりました： three.jsで正しくアニメーション化されていないボーンアニメーション（ブレンダーエクスポート）を使用したモデル

これで、JSONローダーからのgeometryオブジェクトと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. アニメーションブレンディング-キャラクターが実行を停止し、アイドル状態のアニメーションで静止している場合、一方から他方への瞬間​​的なスナップは必要ありません。実行アニメーションを一時停止し、その状態をアイドルアニメーションにブレンドして戻したいと思います。

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

正しい方向に少しだけでも、どんな情報でも大歓迎です。 完全なチュートリアルを終えていません、これらの機能に関するより高いレベルの情報が必要です。

2と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は実装されていません。 2つの_THREE.Animation_を取り、それらの間を補間できるカスタムシェーダーを作成してみてください。
javascriptanimationopengl-esthree.jsskeletal-mesh
25
jozxyqk

リリース67（2014年4月）の時点で、スケルタルアニメーションブレンディングと複数のアニメーションの両方がサポートされています。モデルごとにSkinnedMeshを作成する必要があります。 AnimationHandlerは、フレームごとにアニメーションを更新（ティック）する役割を果たします。したがって、各Animationで手動ではなく、その上でupdateを呼び出す必要があります。

新しく追加された例を参照してください：webgl_animation_skinning_blending.htmlまたはここで私自身のいくつかをチェックしてください：

基本的なキャラクターコントローラー（タイムワープスピードブレンド付き）

タイムワープスピードブレンド

13
insominx

JSONローダーで個別に調整された関数を使用してモデルごとに個別のスキンメッシュを作成することで、Blenderで作成され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の非常に役立つチュートリアル で提供されているものと同じです。

「Modelx_Animation_title」変数は、Blender内で定義され、Three.jsBlenderエクスポーターによってモデルのエクスポートされたJSONファイルにコピーされたアニメーションタイトル名です。

特定のモデルの複数のコピーをロードすると、最初は同期でアニメーション化されます。ただし、再生を再開する前に、各モデルをランダムな短い時間だけ個別に一時停止することで、アニメーションを同期から外すことができました。個々のモデルのアニメーションは、一時停止したフレームから再開されます。

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

おそらく、このアプローチは、質問1、そしておそらく質問2に対するある種の解決策を提供します。

質問2に関して、Three.jsリリースr62は、「複数のアクションをエクスポート」できるようにBlenderエクスポーターを更新しました。私は試していませんが、おそらくこれにより、さまざまなアクションのアニメーションタイトルを指定しながら、特定のモデルの2つ以上のコピーをロードできる可能性があります。その後、さまざまなアクションが必要な場合に、モデルをビューの内外で入れ替えることができる場合があります。

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

0
Tricycle

@Xealgo：ボーンとアニメーションも行うMayaの新しいエクスポーターがあります。数ヶ月前、Blenderワークフローを使わざるを得なくなる前に、それが欲しいです。 :)

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

0
Eskel