img2threejs is an online image-to-Three.js conversion tool used to reconstruct reference images into editable procedural Three.js models. It does not depend on Skills, Codex, Claude Code, or a local agent environment, and can be used directly in the browser.
Purpose It is aimed at programmable web 3D scenes: turning a clean reference image into a browser-native 3D draft for product viewers, explainer pages, configurators, landing page interactions, game and simulation prototypes, teaching demos, internal concept reviews, and similar scenarios. The output exists in a code-first form, making it easy to put into Three.js projects and Git workflows.
Main capabilities
- Image analysis: looking for object contours, visible components, material cues, repeated parts, orientation, and the small details that make the subject recognizable. The tool distinguishes "direct evidence" from "inference"; a visible handle or hinge can be modeled confidently, while an unexposed back panel can only be approximated.
- Procedural construction: mapping observed parts to procedural geometry, materials, positions, rotations, and parent-child relationships. The specification is validated before rendering, and a deterministic builder assembles the hierarchy rather than executing arbitrarily generated code.
- Interactive preview: orbit around the result, toggle material views, and inspect the JSON specification.
- Export: download typed Three.js factory code (returning a reusable THREE.Group) as well as a structured JSON build specification.
- Editability: the downloaded code can rename parts, adjust dimensions, replace materials, attach events, or connect later animations to named components.
- Agent iteration: after purchasing credits, Agent can be used to generate advanced models and enter an iterative view-correct loop.
How to use Upload a PNG or JPG with the object clearly visible; log in and confirm the Agent's credit quote; the tool analyzes the reference image and builds a procedural model, inspects and corrects weak details from multiple viewpoints, then saves the result. After that, you can orbit the model, inspect the structure, and download the TypeScript factory or JSON specification. Simple generation costs 50 credits, standard is 80, and complex is 100; registration does not include free credits, and the exact price is shown before confirmation.
Use cases
- Use clean product photos to generate browser-native drafts for product viewers, explainers, configurators, and landing page interactions; named components make it easy to highlight a feature, replace materials, respond to clicks, orconnect product state to specific parts.
- Before investing in final modeling, texturing, colliders, and animation, first plan recognizable props with named parts, clarifying how the object is assembled, which parts should move, and where later high-fidelity assets should preserve structure.
- Starting from a familiar reference, keep readable TypeScript so creative programmers can change dimensions, colors, repeated elements, or camera behavior.
- The structured JSON also lets AI programming assistants edit within constrained descriptions, rather than facing open-ended visual prompts.
Limitations A single image does not contain the back, bottom, exact proportions, or occluded connections. Hidden surfaces are inferred from the subject category and visible evidence, not measured. Organic anatomy, hair, cloth, transparent materials, complex vehicle surfaces, and precise portraits still require professional 3D tools. The output is an approximation, not a photogrammetry-grade scanned mesh; it does not export GLB, OBJ, FBX, or STL, and its main output is editable Three.js TypeScript plus a structured JSON specification. It does not promise completed rigging or automatic animation; complex deformation, character skinning, physics, and finished motion still require additional implementation. Reference images are sent via the server to OpenRouter and the configured downstream AI models for visual analysis and generation, so do not upload confidential images, personal data, or unauthorized material. For commercial use, you must ensure image rights yourself and review the output, paying attention to protected designs, trademarks, confidential references, or third-party material.
