mixamoからアニメーションを複数ダウンロードしてThree.jsで使う手順

2025/10/21

1つのモデルにアニメーションを複数登録して、Blenderでglbに変換してThree.jsで使ってみます。
少しだけ面倒な箇所があったのでまとめした。

mixamoのデフォルトの青い人形を使う想定なので、もとから動かしたいモデルがある場合は少しだけ違うかもしれません。

やることとしては

1, mixamoから登録したいアニメーションを複数ダウンロード

今回は例として、座っているアニメーションを複数登録します。

フォーマットはデフォルトの「FBX Binary」にします。

すでにモデルがある場合は、「Skin」を「Without Skin」にして大丈夫です。
今回はmixamoデフォルトの青い人形（フリー）を使うので、最初のアニメーションダウンロード時のみSkinをwithSkinでダウンロードしました。

blenderで新規ファイルを開き、ファイル＞インポートからダウンロードしたfbxファイルをインポートして保存します。

またblenderで新規ファイルを開き、ファイル＞インポートからダウンロードした他のfbxファイルをインポートします。
これをmixamoでダウンロードしたアニメーション分、繰り返します。

↑Without Skinでインポートしたので、こんな感じになります。このファイルを直接触ることはありません。

すべてのアニメーション付きモデル分のファイルが出来上がったら、統合したいblenderファイル（最初につくったファイル）で、ファイル＞アペンドから、今までつくったファイルのアクションをアペンドしていきます。

↑mixamoからダウンロードしたら、こんな名前になっていると思います。

これでエクスポートする準備が整いました。見た目にはなんの変化はなくとも大丈夫です。

ファイル＞エクスポートから.glbを選んでエクスポートします。
ここのエクスポートの設定によっては、アニメーションが吐き出されなかったり、アニメーションはあるけど静止したままだったりしてしまうので注意。

内容→選択したオブジェクトになっている場合、ちゃんと選択されているか確認してください。（右クリック→階層を選択で大丈夫です）
メッシュのモディファイアをチェック
マテリアルはエクスポート
スキニングは全ボーンの影響を含むにチェック
アニメーションの欄は画像の通り。ちゃんとアペンドされていると、「アクションの絞り込み」でそれぞれのアニメーションの名前が出るはずです。デフォルトの名前だとthree.jsで触るときに難しいので、必ずここでリネームします。

これでglbファイルのエクスポートはできたはずです。
ちゃんとアニメーションができる状態にあるかどうかは、GlTF Viewerで確認できます。

そして。。。

動かした例が下記です。

ソースコードはこちら

自分の作ったモデルを好きなようにアニメーションできるって、ワクワクしますよね。

正直僕はエクスポートする際にスキニングのチェックを入れていなかったためにアニメーションが動かず、１日無駄にしました。