Turn an object or character reference image into a quality-gated, animation-ready procedural Three.js model built in code. Use for image-to-3D reconstruction, detail-accurate object rebuilds, stylized/likeness-maximized human characters, sculpt specs, and staged code generation.
How to install img2threejs?
hoainho/img2threejs
$npx -y skills add hoainho/img2threejs --skill img2threejsInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/hoainho/img2threejs" --skill "hoainho/img2threejs"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/hoainho/img2threejs" that are relevant to the current task. Run `npx skills add "https://github.com/hoainho/img2threejs"` and select the relevant skills, then follow their instructions.
SKILL.md
| 1 | <div align="center"> |
| 2 | |
| 3 | <img src="assets/logo.svg" width="112" height="112" alt="img2threejs logo" /> |
| 4 | |
| 5 | # img2threejs |
| 6 | |
| 7 | **Rebuild the object in a reference image as a code-only, procedural Three.js model.** |
| 8 | |
| 9 | Quality-gated, animation-ready, and deliberately token-efficient — reconstruction-by-code, not photogrammetry, mesh extraction, or downloaded art packs. |
| 10 | |
| 11 | [](LICENSE) |
| 12 | [](SKILL.md) |
| 13 | [](CONTRIBUTING.md) |
| 14 | [](https://threejs.org) |
| 15 | [](scripts) |
| 16 | |
| 17 | <a href="https://trendshift.io/repositories/83608?utm_source=trendshift-badge&utm_medium=badge&utm_campaign=badge-trendshift-83608" target="_blank" rel="noopener noreferrer"><img src="https://trendshift.io/api/badge/trendshift/repositories/83608/daily?language=Python" alt="hoainho%2Fimg2threejs | Trendshift" width="250" height="55"/></a> |
| 18 | |
| 19 |  |
| 20 | |
| 21 | </div> |
| 22 | |
| 23 | *A single reference image reconstructed in code — correct proportions, colours, bevels, gold trim, and an emissive emblem — running live in the browser.* |
| 24 | |
| 25 | ### [→ Open the Live Demo Gallery](https://hoainho.github.io/img2threejs-showcase/) |
| 26 | |
| 27 | Every model in the gallery is generated code, running in your browser. No mesh files, no downloads. |
| 28 | |
| 29 | --- |
| 30 | |
| 31 | ## Live demos |
| 32 | |
| 33 | Reconstructions built entirely from primitives, procedural shaders, and generated geometry. The clips below are the live models running in-browser — open each one to orbit it and read the generated source. |
| 34 | |
| 35 | | Demo | Preview | Subject | View | Source | |
| 36 | | --- | --- | --- | --- | --- | |
| 37 | | Sony WF-1000XM3 Earbuds + Case | <img src="assets/sony-wf1000xm3.gif" width="260" alt="Sony WF-1000XM3 live demo" /> | hard-surface object | [Live](https://hoainho.github.io/img2threejs-showcase/#/demo/sony-wf1000xm3) | [code](https://github.com/hoainho/img2threejs-showcase/blob/main/src/demos/sony-wf1000xm3/createSonyWf1000xm3Model.ts) | |
| 38 | | ISSACA 12 Gauge Shotgun | <img src="assets/issaca-shotgun.gif" width="260" alt="ISSACA 12 Gauge Shotgun live demo" /> | hard-surface object | [Live](https://hoainho.github.io/img2threejs-showcase/#/demo/issaca-shotgun) | [code](https://github.com/hoainho/img2threejs-showcase/blob/main/src/demos/issaca-shotgun/createIssacaShotgunModel.ts) | |
| 39 | | Gerber Paracord Knife | <img src="assets/gerber-knife.gif" width="260" alt="Gerber Paracord Knife live demo" /> | hard-surface object | [Live](https://hoainho.github.io/img2threejs-showcase/#/demo/gerber-knife) | [code](https://github.com/hoainho/img2threejs-showcase/blob/main/src/demos/gerber-knife/createGerberKnifeModel.ts) | |
| 40 | | Doraemon House (isometric diorama) | <img src="assets/doraemon-house.gif" width="260" alt="Doraemon House live demo" /> | hard-surface object | [Live](https://hoainho.github.io/img2threejs-showcase/#/demo/doraemon-house) | [code](https://github.com/hoainho/img2threejs-showcase/blob/main/src/demos/doraemon-house/createDoraemonHouseModel.ts) | |
| 41 | | War-Hauler "SECTOR 07" | <img src="assets/warhauler.gif" width="260" alt="War-Hauler SECTOR 07 live demo" /> | hard-surface object | [Live](https://hoainho.github.io/img2threejs-showcase/#/demo/warhauler) | [code](https://github.com/hoainho/img2threejs-showcase/blob/main/src/demos/warhauler/createWarHaulerModel.ts) | |
| 42 | | Crowned Loot Chest | <img src="assets/crown-chest.gif" width="260" alt="Crowned Loot Chest live demo" /> | hard-surface object | [Live](https://hoainho.github.io/img2threejs-showcase/#/demo/crown-chest) | [code](https://github.com/hoainho/img2threejs-showcase/blob/main/src/demos/crown-chest/createCrownChestModel.ts) | |
| 43 | |
| 44 | The gallery source lives in [hoainho/img2threejs-showcase](https://github.com/ho |
Related
6 picksType
- remotion-best-practicesRouter for all Remotion skillsJul 2026
- ai-image-generationGenerate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI.Jul 2026
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes,…Jul 2026
- hyperframesMandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo,…Jul 2026
- remotion-to-hyperframesPort an existing Remotion (React) composition''s source to HyperFrames HTML.Jul 2026
- hyperframes-coreThe HyperFrames composition contract — build one renderable project.Jul 2026
