img2threejs skill
A skill rebuilds the object in a reference image as a procedural Three.js model written in code, not downloaded art
- 21,225 ★ on the repository
- Last commit
- Apache-2.0
Minimal access
Why this level
- Runs local Python scripts to check geometry, but makes no network calls and writes only inside the project
Install
- Works in
Manual install
img2 add img2threejs/plugin-<id> --ref <tag>Installs a domain plugin, for example for characters, through the separate img2 CLI, which must be installed first.
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- Runs local Python scripts to check geometry, but makes no network calls and writes only inside the project
This is third-party code. Review the repository files before installing.
What it does
The skill walks an agent through a multi-stage pipeline that rebuilds an object or character from a photo into a procedural TypeScript Three.js model. It starts with image analysis and a complexity assessment, then a written specification covering the detail hierarchy, materials, and animation anchors, then a pass-by-pass build from rough form to final detail and lighting. After each pass the skill takes a screenshot and checks it against the reference through separate gates: silhouette, left-right mirror symmetry, self-intersections, and detail coverage. The result is not a one-shot mesh generation but code that can be animated and taken apart into pieces.
Who it is for. For developers building Three.js scenes who want a readable code object built from a photo instead of downloaded art.
Good fit when
- You need a procedural 3D model of an object or character from a reference image
- You need an object that can be animated or taken apart in a game or scene
- You need a detailed material and form reconstruction, not a rough approximation
Not a fit when
- A ready mesh from photogrammetry or a purchased asset is good enough
- You need exact geometry from every angle but have only a single-view image
Example request
From this photo of a backpack, build a procedural Three.js model with zippers that can openLimitations
The pipeline is multi-stage and built for serious agent work with dozens of dependency-free Python 3.10 scripts, not a quick one-shot generation. A single image cannot reveal hidden sides of an object, and the skill reports that honestly instead of guessing the geometry. Domain plugins for specific object types install separately through their own img2 CLI.
How to disable. Delete the img2threejs folder or symlink from ~/.claude/skills, ~/.codex/skills, or your agent's other skills folder.
FAQ
Is this photogrammetry or mesh extraction?
No, the skill explicitly says the opposite: the model is built from code from scratch, not extracted from a scan or downloaded pack.
Which agents does the skill work with?
The author describes it as agent-agnostic, confirmed with Claude Code, Codex, and OpenCode; for vision and browser access it uses whatever the host agent provides.
Discussion
No questions or reviews yet.
Related
SkillsA skill that draws interactive isometric illustrations in SVG, with WebGL shaders and React output, explaining an idea as a working machine
The scan-to-threejs skill refines a 3D scene in a loop, checking renders against room photos from matching camera angles.
A skill for Live2D projects: from layers and Cubism rigging to browser acceptance and rollback, with code and a sample model.
One line naming a machine, and Claude Code builds an interactive physics-based 3D model of it in a single HTML file
A skill that makes an offline page with a blue-style 3D blueprint of a monument from photos and sources or merges models into one
A loop skill: the agent generates a target screenshot, builds toward it, and uses a critic subagent to close the gap until they match
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| img2threejs (this card) | no | 21,225 | ||
| Machine Skill | no | 650 | one line naming a machine | |
| Kiln | no | not required | 327 | a local MCP server and CLI |
README in short
The README frames the skill as building an object from a photo in code, emphasizing controlled quality and animation-readiness over speed. It draws a clear line between how the model is built and any later export to other formats: the code-only promise applies only to the build stage. It separately covers the img2 harness for installing domain plugins for specific object categories, such as characters or machinery. Apache-2.0 licensed.
README badge
Original SKILL.md
--- name: img2threejs description: 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. license: Apache-2.0 version: 2.0.0 --- # img2threejs — Image to procedural Three.js Rebuild the object visible in a reference image as a **code-only** procedural Three.js model, gated by a staged sculpting pipeline and an AI-vision self-correction loop. This is reconstruction-by-code, **not** photogrammetry, mesh extraction, or downloaded art packs. Agent-agnostic: works under Claude Code, Codex, or OpenCode. ## Core Promise Sculpt from a photo, in order, never one-shot a mesh: 1. Run forge/next.py at every start, resume, and before every correction iteration. 2. Validate the image is a suitable 3D target. 3. Assess object class and complexity, then write a qualityContract before any code. 4. Spec it: component hierarchy, materials, lighting, pivots, sockets, action anchors. 5. Build pass-by-pass from blockout to structure, form, material, lighting, interaction, optimization. 6. Verify each pass with a screenshot compared against the reference.