I generated a 3D model of my dog using AI, rigged it in Blender, and created a run game using Three.js.
Generating the 3D Model
I generated the 3D model of my dog using Tripo-DG. It's a service that can generate high-quality 3D models from text or images.
The generated model had separated polygroups (when checked in object mode, it was divided into multiple parts). If I rigged it as is, tears would appear when moving it, so the remeshing process described later was necessary.
Adding Bones and Rigging
To animate a 3D model, you need bones (skeleton) and a rig (linking the skeleton to the vertices).
Trying Auto-Rigging
I tried several auto-rigging services.
- anything.world — A service that supports auto-rigging for quadruped models. You can even input that it's a Pomeranian. However, I gave up this time because an error occurred during generation.
- AutoRig Pro (Paid Blender plugin) — There were reports that auto-rigging didn't work well even when trying to add dog bones to Eevee (Pokémon), so it was difficult for a model with unique proportions like my dog.
Using Rigify
In the end, I decided to manually rig it using Blender's Rigify.
- https://motionzoo.net/rigifyzoo/
- https://note.com/shiny_avocet497/n/n649c404e79a4
- https://motionzoo.net/blender_rigify_cat/
Video I referred to:
Since my dog's proportions are significantly different from a typical dog's skeleton (large head, short legs), adjusting the flesh was particularly difficult.
Remeshing and Baking
To solve the issue of the Tripo-DG generated model having separated polygroups, I performed remeshing.
- Remesh to integrate the scattered parts into a single mesh.
- Retopologize to create a low-poly geometry suitable for games.
- Bake the texture onto the low-poly geometry.
- Create new material → Create new texture image → Unwrap with Smart UV Unwrap → Bake with Diffuse.
Note that remeshing deletes the original UV map, so you need to set it to reference the material of the original model before baking (using Transform along normals).
Reference: https://redhologerbera.hatenablog.com/entry/2021/04/11/195700
For the running animation, I referred to assets like AnimBox that can utilize dog rigs.
Three.js Game: Fuwa Run 2025
Developed with Vite + Three.js and hosted on Vercel. For parts where my understanding of the scene structure around Vectors was shallow, I supplemented it with Vibe Coding using Gemini 2.5 Pro.
1st Proto: Simple Scene
- Basic controls are like an RC car (OrbitControls when not operating).
- Obtained an HDR spherical image from Poly Haven and used it for the background.
- Scattered Aloe Yogurt in addition to my dog.
- Placed tree models (external assets) and rocks (drawn in low-poly) as obstacles.
- There was an issue where drawing became heavy if the tree material wasn't fixed.
- Implemented an intro screen and score display.
- Referred to Three.jsで新宿駅構内の3D探索ゲームを作ってみる - Qiita etc.
- Considered mobile support referring to 【Three.js】ジョイスティック風UIでARオブジェクトを操作する - Zenn.
- Referred to techblog.kayac.com for bone animation.
Summary
While generating the model itself takes only a moment with AI, the most time-consuming part was remeshing, retopologizing, baking, and rigging to bring it to a quality usable in a game. On the other hand, game logic and scene construction with Three.js have good synergy with generative AI, allowing me to build a prototype quickly.
In the future, I plan to implement a Kagurazaka map and add a joystick UI for mobile support. Ø
