# Install "Image to 3D Hero (one picture to a playable rigged GLB, free open-source route, three.js WASD)"

A GameSkill original that takes one character image to a third-person hero you can walk with WASD, using free tools only: TripoSR or TRELLIS.2 for the mesh, UniRig or Blender for the rig, Quaternius CC0 clips, then a headless Blender fix step and a GLB check for scale, feet, facing and clip names. Meshy, Tripo and Mixamo are listed as alternatives only. Tested on Bram, a made-up stand-in hero.

- Source: GameSkill original, hosted only on https://gameskill.dev/skills/image-to-3d-hero
- Based on (ideas only, code is ours): Image to playable 3D hero pipeline (idea only) https://x.com/bonsaixbt/status/2116539919145349574 by @bonsaixbt (public post, step order only; no text, prompts or images used)
- License: MIT
- By: GameSkill
- Works with: Claude Code, Codex, Cursor, OpenCode
- Engines: Web (Phaser / Three.js), Blender, Godot

## Prerequisites

- Node 18+ (tools/inspect-glb.mjs uses built-ins only)
- Blender 4.2+ for tools/fix-hero.py
- For the mesh and rig steps: TripoSR (CPU works) or TRELLIS.2 and UniRig (NVIDIA GPU)
- For the example: npm ci (three, puppeteer-core) and Chrome or Chromium

## Install GameSkill's tested copy (recommended)

GameSkill wrote this skill for gameskill.dev and hosts it here (MIT). The ZIP holds SKILL.md, SKILL.zh.md, scripts, a runnable example, tests, CHECKLIST.md, LICENSE, CREDITS.md, ATTRIBUTION.md and a `gameskill/` folder (test report, self-check list, Chinese guide).

- ZIP: https://gameskill.dev/dl/skills/image-to-3d-hero.zip (85 KB, sha256 b181c9a813f68ce9c459c9c4b2d6229ba7851ae343c03763bf142c2b26b25c84)
- Version: 1.0.0 (2026-11-03). Latest version and changes: https://gameskill.dev/skills/image-to-3d-hero/version.json
- Tested by GameSkill on three.js 0.187 in Chrome headless + Blender 5.2 headless + Node (GLB inspector), 2026-11-03: 25/25 checks passed. Report: https://gameskill.dev/dl/skills/image-to-3d-hero/test-report.json

The ZIP holds one folder, `image-to-3d-hero/`, with SKILL.md directly inside it.

Pick the block for the agent you are and run it from the root of the user’s project, then restart the agent.

### Claude Code (`.claude/skills/image-to-3d-hero/`)

```bash
mkdir -p .claude/skills
curl -fsSL https://gameskill.dev/dl/skills/image-to-3d-hero.zip -o /tmp/gameskill-image-to-3d-hero.zip
unzip -oq /tmp/gameskill-image-to-3d-hero.zip -d .claude/skills
rm /tmp/gameskill-image-to-3d-hero.zip
```

### Codex, Gemini CLI, OpenCode (`.agents/skills/image-to-3d-hero/`)

```bash
mkdir -p .agents/skills
curl -fsSL https://gameskill.dev/dl/skills/image-to-3d-hero.zip -o /tmp/gameskill-image-to-3d-hero.zip
unzip -oq /tmp/gameskill-image-to-3d-hero.zip -d .agents/skills
rm /tmp/gameskill-image-to-3d-hero.zip
```

### Cursor (`.cursor/skills/image-to-3d-hero/`)

```bash
mkdir -p .cursor/skills
curl -fsSL https://gameskill.dev/dl/skills/image-to-3d-hero.zip -o /tmp/gameskill-image-to-3d-hero.zip
unzip -oq /tmp/gameskill-image-to-3d-hero.zip -d .cursor/skills
rm /tmp/gameskill-image-to-3d-hero.zip
```

### GitHub Copilot (`.github/skills/image-to-3d-hero/`)

```bash
mkdir -p .github/skills
curl -fsSL https://gameskill.dev/dl/skills/image-to-3d-hero.zip -o /tmp/gameskill-image-to-3d-hero.zip
unzip -oq /tmp/gameskill-image-to-3d-hero.zip -d .github/skills
rm /tmp/gameskill-image-to-3d-hero.zip
```

### Windsurf (`.windsurf/skills/image-to-3d-hero/`)

```bash
mkdir -p .windsurf/skills
curl -fsSL https://gameskill.dev/dl/skills/image-to-3d-hero.zip -o /tmp/gameskill-image-to-3d-hero.zip
unzip -oq /tmp/gameskill-image-to-3d-hero.zip -d .windsurf/skills
rm /tmp/gameskill-image-to-3d-hero.zip
```

### Self-check after using the skill

- 朝向 +Z，按 W 远离镜头 / Faces +Z, W walks away from the camera
- 身高 1.6-2.0 米，脚在 y=0 / 1.6-2.0 m tall, feet on y=0
- 五个动画角色都有对应 / All five clip roles mapped
- inspect-glb 没有 FAIL / inspect-glb has no FAIL lines
- 记下模型、权重和动画包的许可证 / Licences of models, weights and clips written down
- 浏览器文件里没有 API 密钥 / No API key in browser files

## Verify

- `image-to-3d-hero/SKILL.md` exists in the skills folder above.
- Try a request like: "Here is a drawing of my courier character. Make it a 3D hero I can walk with WASD in the browser, with free tools only, and check the GLB before we use it."
- Tell the user what you installed and where.

## Attribution

"Image to 3D Hero (one picture to a playable rigged GLB, free open-source route, three.js WASD)" is a GameSkill original (https://gameskill.dev/skills/image-to-3d-hero), licensed under MIT. CREDITS.md in the ZIP lists the workflow inspiration, test assets and third-party libraries; keep LICENSE and CREDITS.md with any copy.