three.js - three.js でボーンアニメーション (ブレンダーエクスポート) が正しくアニメーション化されないモデル

Question

現在、three.js で骨格アニメーションのテストに取り組んでいます。ブレンダーでうまくアニメーションする単純なモデルがあります。基本的には、3 つの積み重ねられた曲がった立方体で構成されています。

Blender V2.64 で Blender Export プラグインを使用して Blender ファイルを three.js にエクスポートすると、webGl コンテキストのアニメーションがスキンの重み付けが間違っているかのように異なって表示されます。

three.jsで正しい結果を得るにはどうすればよいですか?

score 10 · Accepted Answer

私はあなたが github の議論から引用した人物です。私は最近、このパイプライン (つまり、Blender のボーンアニメーションを threejs に変換する) を試しており、毎回機能する信頼できるプロセスを見つけるのは非常に難しいことがわかりました。

私のブログでは、いくつかの機会に成功を収めるための「ヒント」のリストをまとめました。

要約すると、私が見つけた最も重要なことは次のとおりです。

エクスポートする前にアーマチュアモディファイアを削除してください。そうしないと、アニメーションが台無しになります。

頂点グループがボーンに適切に割り当てられていることを確認してください。( Blender では、自動ボーンウェイトを使用できます。)

アニメーションの最初と最後のフレームですべてのボーンにキーを設定します。(あなたが発見したように、変更したボーンのキーしか持っていない場合、ThreeJS は他のボーンについて何も推測せず、問題が発生します。)

これらのガイドラインに従っても、一貫して動作させることができず、ライブラリがもう少し成熟するまでモーフターゲットの使用を検討しています。モーフターゲットのファイルサイズははるかに大きくなりますが、私の経験では、現時点ではより信頼性の高いオプションのようです。

score 3 · Accepted Answer

多くの掘り下げの後、three.js github ディスカッションの 1 つで最終的に答えを見つけました。

「アニメーションの最初と最後にあるすべてのボーンに完全なキーフレームを挿入します。最初のキーフレームがないと、アニメーションが微妙に歪んでしまい、最後のキーフレームがないと、アニメーションの一部が最後に失われることがわかりました。 ."

それがまさに私たちのレンダリングに起こったことです。変化するボーンに対してのみキーフレームを設定し、静的なボーンに対しては設定しません。

score 2 · Accepted Answer

また、エクスポートされたモデルを正しく動作させるには、Blender のフレーム 0 でエクスポートを行う必要があることもわかりました。

私が遭遇した問題を解決したもう 1 つのことは、エクスポート後にモデルをスケーリングしないことでした。これは、モデルを JSON ファイルで、おそらくコードで直接スケーリングできないことを意味します。

three.js r56 の使用

three.js - three.js でボーン アニメーション (ブレンダー エクスポート) が正しくアニメーション化されないモデル