26

私は、それを使用している多くのプレイヤーと単一のスキン プレイヤー メッシュを持つ小さなマルチプレイヤー ゲームに取り組んでいます。いくつかの背景: Maya と Blender の collada エクスポートを介してロードしようとしました。どちらも何らかの形式のアニメーション データを参照しているようですが、動作させることができませんでした。私は Maya JSON エクスポーターを試してみました。このエクスポーターは、マテリアル ラインのみで小さな 1k ファイルを吐き出しました。最後に、ブレンダーの JSON エクスポーターが機能しました。スキンメッシュを読み込もうとしている人には、これが非常に役立つことがわかりました: Model with bone animation (blender export) animating correctly in 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. 多くのアニメーション- アイドル/実行サイクルを個別に再生できるようにしたい。

    私の知る限り、アニメーション キーフレームのタイムラインは 1 つしかありません。Three.js はこれをどのように分割しますか、それとも手動で行う必要がありますか?

  3. アニメーション ブレンディング- キャラクターが実行を停止し、アイドル アニメーションで静止している場合、一方から他方への瞬時のスナップは必要ありません。実行アニメーションを一時停止し、その状態をアイドル アニメーションにブレンドしたいと思います。

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

正しい方向への微調整であっても、どんな情報でも大歓迎です。私は完全なチュートリアルではありません。これらの機能に関するより高度な情報が必要です。

私は喜んで2と3を実装することができましたが、threejs のスキニングとアニメーションのフレームワークに関する情報/説明文書が必要です。たとえば、これはあまり続きません。

[編集]
ありがとう、@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. 私の知る限り実装されていません。THREE.Animation2 つの を取り、その間を補間できるカスタム シェーダーを作成してみるかもしれません。
4

3 に答える 3

0

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

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

于 2014-04-21T13:55:12.277 に答える
0

Blender で作成され、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 の非常に役立つチュートリアルで提供されているものと同じです。

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

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

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

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

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

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

于 2014-01-25T13:12:04.713 に答える