概要
Three.js（React Three Fiber）でglbモデルを扱うときに、Maximoからモデルをお借りする場合、Maximoからダウンロードできるファイルはfbx形式なので、一度Blenderでglb形式にエクスポートしてからThree.jsにインポートするという手順を踏んでいます。
Maximoからダウンロードできるファイルは、以下のようになっています。
- スキン（TPose）だけのモデル
- アニメーションだけのモデル
- スキン + アニメーションのモデル
さらに、それぞれに対してアーマチュアの情報が含まれます。
このため、1つのモデルで複数のアクションを扱うときに、そのままモデルと各アニメーションファイルを別々に扱うとアーマチュアの情報が重複して、ファイルサイズが大きくなってしまいます。
また、glbファイルを個別にインポートすると、その分ロード時間が長くなります。
この記事では、ひとつのArmatureに複数のアクションを統合する手順について、Mixamoモデルを使用してまとめました。
使用するモデル
使用するモデルは、Mixamoから以下のものをお借りしました。
下3つはアニメーションのみダウンロードしています。
ファイルの統合
スキンモデルの追加
Blenderでスキンモデル（ybot.fbx）をインポートします。
NLA（Non Linear Animation）にスタッシュする
glbファイルでエクスポートできるアニメーションは、オブジェクトのアクティブアクション（オブジェクトに1対1で割り振られたアクション）か、NLAトラックに格納されているアクションになります。
（詳しくは、ドキュメント参照）
今回のように、複数のアクションを扱いたい場合は、NLAトラックにスタッシュする必要があります。
スキンモデルには、TPoseのアクションとしてArmature|mixamo.com|Layer0が割り振られているので、これをNLAトラックにスタッシュします。
画面下部から、ノンリニアアニメーション画面に移動して、スタッシュします。
必須ではないですが、アクション名をわかりやすくするために、Armature|mixamo.com|Layer0をTPoseにリネームしています。
アニメーションファイルの追加
アニメーションファイル（Swing Dancing.fbx）をインポートします。
スタッシュはしないで、リネームだけ行います。
アクションの統合
[ドーフシート]から[アクション]に移動して、親のArmature（TPoseの方）を選択します。
この状態で、[Swing]アクションを選択します。
そうすると、[Swing]アクションが親のArmatureに統合されます。
ツリーを見ると、[Swing]アクションがアクティブアクションとなっているので、ノンリニアアニメーション画面に移動してこれをスタッシュします。
Swing Dancing.fbxからインポートしたArmatureは削除します。
これで統合ができました！
あとは、統合したいアクションの数だけ同じことを繰り返すだけです。
確認（React Three Fiber）
React Three Fiberでglbファイルを扱う場合、インポート用の雛形ファイルを生成してくれる便利なサイトがあります。
ここで、統合したアクションが含まれているか確認してみます。
コントローラーのtypesにチェックを入れると、TypeScript用の型付きのコードが生成されます。
ここで、ActionNameに統合したアクションの名前が入っていればOKです。
また、glbファイルにアニメーションが含まれる場合、useAnimationsが使用されます。雛形ではactionsしか受け取っていませんが、namesを参照することでアクション名の配列を受け取れます。
const { actions, names } = useAnimations(animations, group)
参照