img2threejs

Install

npx skillfoxx add skills/img2threejs

npx skills add img2threejs/img2threejs --skill img2threejs -a claude-code -y

npx skills add img2threejs/img2threejs --skill img2threejs -a cursor -y

npx skills add img2threejs/img2threejs --skill img2threejs -a github-copilot -y

npx skills add img2threejs/img2threejs --skill img2threejs -a codex -y

npx skills add img2threejs/img2threejs --skill img2threejs -a gemini-cli -y

npx skills add img2threejs/img2threejs --skill img2threejs -a cline -y

npx skills add img2threejs/img2threejs --skill img2threejs -a roo -y

npx skills add img2threejs/img2threejs --skill img2threejs -a opencode -y

img2 add img2threejs/plugin-<id> --ref <tag>

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.

Example request

From this photo of a backpack, build a procedural Three.js model with zippers that can open

Limitations

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.

Security check

• Runs local Python scripts to check geometry, but makes no network calls and writes only inside the project

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.

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.

Related