search
LoginSignup
4

More than 1 year has passed since last update.

posted at

updated at

【Blender】ひとつのArmatureに複数のアクションを統合する

概要

Three.js(React Three Fiber)でglbモデルを扱うときに、Maximoからモデルをお借りする場合、Maximoからダウンロードできるファイルはfbx形式なので、一度Blenderでglb形式にエクスポートしてからThree.jsにインポートするという手順を踏んでいます。

Maximoからダウンロードできるファイルは、以下のようになっています。

  • スキン(TPose)だけのモデル
  • アニメーションだけのモデル
  • スキン + アニメーションのモデル

さらに、それぞれに対してアーマチュアの情報が含まれます。
このため、1つのモデルで複数のアクションを扱うときに、そのままモデルと各アニメーションファイルを別々に扱うとアーマチュアの情報が重複して、ファイルサイズが大きくなってしまいます。
また、glbファイルを個別にインポートすると、その分ロード時間が長くなります。

この記事では、ひとつのArmatureに複数のアクションを統合する手順について、Mixamoモデルを使用してまとめました。

使用するモデル

使用するモデルは、Mixamoから以下のものをお借りしました。

下3つはアニメーションのみダウンロードしています。

スクリーンショット 2022-01-19 183105.png

ファイルの統合

スキンモデルの追加

Blenderでスキンモデル(ybot.fbx)をインポートします。
スクリーンショット 2022-01-19 183520.png

NLA(Non Linear Animation)にスタッシュする

glbファイルでエクスポートできるアニメーションは、オブジェクトのアクティブアクション(オブジェクトに1対1で割り振られたアクション)か、NLAトラックに格納されているアクションになります。
(詳しくは、ドキュメント参照)

今回のように、複数のアクションを扱いたい場合は、NLAトラックにスタッシュする必要があります。

スキンモデルには、TPoseのアクションとしてArmature|mixamo.com|Layer0が割り振られているので、これをNLAトラックにスタッシュします。

画面下部から、ノンリニアアニメーション画面に移動して、スタッシュします。
スクリーンショット 2022-01-19 184927.png
スクリーンショット 2022-01-19 185057.png

必須ではないですが、アクション名をわかりやすくするために、Armature|mixamo.com|Layer0TPoseにリネームしています。

スクリーンショット 2022-01-19 185410.png
スクリーンショット 2022-01-19 185501.png

アニメーションファイルの追加

アニメーションファイル(Swing Dancing.fbx)をインポートします。
スタッシュはしないで、リネームだけ行います。
スクリーンショット 2022-01-19 185848.png

アクションの統合

[ドーフシート]から[アクション]に移動して、親のArmature(TPoseの方)を選択します。
スクリーンショット 2022-01-19 190042.png
スクリーンショット 2022-01-19 190111.png
スクリーンショット 2022-01-19 190244.png

この状態で、[Swing]アクションを選択します。
スクリーンショット 2022-01-19 190457.png
そうすると、[Swing]アクションが親のArmatureに統合されます。
ツリーを見ると、[Swing]アクションがアクティブアクションとなっているので、ノンリニアアニメーション画面に移動してこれをスタッシュします。
スクリーンショット 2022-01-19 190818.png
スクリーンショット 2022-01-19 190915.png

Swing Dancing.fbxからインポートしたArmatureは削除します。

これで統合ができました!
あとは、統合したいアクションの数だけ同じことを繰り返すだけです。
スクリーンショット 2022-01-19 191503.png

確認(React Three Fiber)

React Three Fiberでglbファイルを扱う場合、インポート用の雛形ファイルを生成してくれる便利なサイトがあります。
ここで、統合したアクションが含まれているか確認してみます。

スクリーンショット 2022-01-19 192011.png

コントローラーのtypesにチェックを入れると、TypeScript用の型付きのコードが生成されます。
ここで、ActionNameに統合したアクションの名前が入っていればOKです。
また、glbファイルにアニメーションが含まれる場合、useAnimationsが使用されます。雛形ではactionsしか受け取っていませんが、namesを参照することでアクション名の配列を受け取れます。

const { actions, names } = useAnimations(animations, group)

参照

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4