愛犬の3Dモデルを AI で生成し、Blender でリグを入れ、Three.js でランゲームを作りました。
3Dモデルの生成
Tripo-DG で愛犬の3Dモデルを生成しました。テキストまたは画像からハイクオリティな3Dモデルを生成できるサービスです。
生成されたモデルはポリグループが分かれていて（オブジェクトモードで確認すると複数のパーツに分割されている）、そのままリグを入れると動かしたときに裂け目が出てしまうため、後述のリメッシュ処理が必要でした。
ボーン・リグを入れる
3Dモデルにアニメーションをつけるためにはボーン（骨格）とリグ（骨格と頂点の紐付け）が必要です。
自動リグの試み
いくつかの自動リグサービスを試しました。
- anything.world — 四足歩行モデルへの自動リグに対応しているサービス。ポメラニアンであることなども入力できる。ただし今回は生成時にエラーが出て断念。
- AutoRig Pro（Blenderの有料プラグイン） — イーブイ（ポケモン）に犬のボーンを入れようとした事例でも自動ではうまくいかなかったという報告があり、愛犬のような独特なプロポーションのモデルには難しかった。
Rigify を使う
結局 Blender の Rigify を使って手動でリグを入れることにしました。
- https://motionzoo.net/rigifyzoo/
- https://note.com/shiny_avocet497/n/n649c404e79a4
- https://motionzoo.net/blender_rigify_cat/
参考にした動画:
愛犬のプロポーションは一般的な犬の骨格と大きく異なるため（頭が大きく、足が短い）、肉付けの調整がとくに難しかったです。
リメッシュとベイク
Tripo-DG 生成モデルのポリグループが分かれている問題を解消するため、リメッシュを行いました。
- リメッシュしてバラバラなパーツを一つのメッシュに統合
- リトポロジーしてゲーム向けのローポリジオメトリを作成
- ローポリジオメトリにテクスチャをベイク
- マテリアル新規作成 → テクスチャ画像新規作成 → Smart UV Unwrap で展開 → Diffuse でベイク
注意点として、リメッシュすると元の UV マップが消えてしまうため、ベイク前に元モデルのマテリアルを参照する設定が必要です（法線に沿った Transform を使う）。
参考: https://redhologerbera.hatenablog.com/entry/2021/04/11/195700
走るアニメーションは犬のリグを活用できる AnimBox などのアセットを参考にしました。
Three.js Game: Fuwa Run 2025
Vite + Three.js で開発し、Vercel でホスティングしています。Vector 周りのシーン構造の理解が浅い部分は Gemini 2.5 Pro を使ったバイブコーディング（Vibe Coding）で補いました。
1st Proto: シンプルなシーン
- 基本はラジコンカーのような操作（操作中以外は OrbitControls）
- HDR の天球画像を Poly Haven から取得して背景に使用
- 愛犬のほかにアロエヨーグルトを点在させた
- 障害物として木のモデル（外部アセット）と岩（ローポリで描画）を配置
- 木はマテリアルを固定にしないと描画が重くなる問題があった
- イントロ画面とスコア表示を実装
- Three.jsで新宿駅構内の3D探索ゲームを作ってみる - Qiita などを参考にした
- 【Three.js】ジョイスティック風UIでARオブジェクトを操作する - Zenn を参考にモバイル対応も検討
- ボーンアニメーションは techblog.kayac.com を参考にした
まとめ
AI を使えばモデル生成自体は一瞬ですが、ゲームに使えるクオリティに仕上げるためのリメッシュ・リトポロジー・ベイク・リグ入れが一番の手間でした。一方、Three.js によるゲームロジックやシーン構築は生成 AI との相性が良く、プロトタイプを素早く作れました。
今後は神楽坂マップの実装やモバイル対応のジョイスティック UI などを追加していく予定です。 Ø
