img2threejs is a free web-based converter that turns a single clear object image into an editable procedural Three.js model. It produces a structured hierarchy of named parts, materials, and transforms, which can be previewed interactively in the browser and exported as readable TypeScript and JSON. The tool is designed for developers who need a programmable starting point for web 3D projects, keeping the output inspectable and modifiable rather than an opaque mesh.
What is img2threejs?
img2threejs is a free online converter that takes one clear object image as input and generates a procedural Three.js model. The output is a validated specification mapped to geometry, materials, positions, rotations, and parent-child relationships, assembled by a deterministic builder. The result can be previewed in the browser, inspected as JSON, and downloaded as a typed TypeScript factory that returns a reusable THREE.Group. The tool is available at img2threejs.com and is intended for developers working with Three.js.
Key Features
- Interactive preview — Orbit the generated 3D model in the browser, switch material views, and inspect the JSON specification before exporting.
- Editable Three.js output — The model is built from named parts, materials, and transforms, so developers can rename, adjust dimensions, replace materials, attach events, or connect animations to specific components.
- TypeScript + JSON downloads — Export a readable TypeScript factory that returns a THREE.Group, along with a JSON specification that describes every construction decision.
- Validated spec before rendering — The converter separates direct evidence from inference and validates the specification before building, avoiding malformed or unsafe generated code.
- Deterministic builder — The hierarchy is assembled by a deterministic builder rather than arbitrary generated code, making every transform available for review.
- Quick mode and Agent mode — Quick mode generates from a single image, while Agent mode (a future multi-pass workflow) uses multiple reference views for more complex objects.
Who is it for?
- Web developers — Create browser-native 3D product previews, explainers, configurators, and landing-page interactions from a clean product photo.
- Game developers — Prototype recognizable props as named components before investing in final modeling, textures, and collision shapes.
- Creative coders — Use the generated TypeScript as a starting point for Three.js projects, varying dimensions, colors, and camera behavior without rebuilding an imported mesh.
- AI coding assistants — The structured JSON provides a constrained description that an AI assistant can edit, instead of an open-ended visual prompt.
What can you do with img2threejs?
- Interactive product previews: Use a clean product photo to create a browser-native draft for product viewers, configurators, and landing-page interactions, with named components for highlighting features or swapping materials.
- Game prop prototypes: Block out a recognizable prop as named components to clarify assembly and movement before final modeling, treating the result as an editable prototype.
- Three.js creative coding: Start from a familiar reference and keep the result as readable TypeScript that fits a Three.js project and Git workflow, varying dimensions, colors, or repeated elements.
- Inspectable web 3D assets: Keep components, materials, and transforms available for replacement and continued editing, useful for educational demos, technical explainers, and interfaces where application state needs to reach a particular part.
How does img2threejs work?
- Upload and analyze — The converter analyzes the object silhouette, visible components, material cues, repeated parts, orientation, and small details, separating direct evidence from inference.
- Build a validated spec — Observed parts are mapped to procedural geometry, mater
