🐙
Freecoding agentopen source

img2threejs reconstructs 3D objects for the browser from a single reference image, generating TypeScript Three.js code rather than extracting a mesh. It runs a staged, quality-gated pipeline — blockout, structural, form, material, surface, lighting, interaction, optimization — with a detail-first analysis step that enumerates the object's identity-defining features before any code is generated, and deterministic Python validation scripts to keep LLM token usage low. It handles hard-surface objects, humanoid characters, and creatures, with a specialized track for CS2 weapon models. Nearly 10,000 GitHub stars, with a live gallery of 10+ working demos at the showcase site.

What is img2threejs?

img2threejs takes a single reference image of an object and produces a Three.js model of it as TypeScript source. That is the unusual part. It does not reconstruct a mesh the way photogrammetry does; it writes code that builds the object from primitives, generated geometry and shaders, so what you get back is a procedural model you can read, edit and animate rather than an opaque asset. The project describes a staged pipeline with quality gates between steps, moving through blockout, structure, form, material, surface, lighting, interaction and optimization. Before any code is written, an analysis step enumerates the features that make the object recognizable, which is what keeps later stages from drifting. Deterministic Python validation scripts handle the checks that do not need a model, holding token usage down. The project states support for hard-surface objects, humanoid characters and creatures.

Who is img2threejs for?

Reach for this when you need a browser-ready 3D object and the thing you actually care about is that it can be controlled in code. Procedural output suits a product configurator where parts change, a game prototype where a shape needs to respond to state, or a web scene where you want to animate a component rather than a baked mesh. It also fits the case where you have a reference picture and no modeling skill, and where a rough but editable result beats no result. It is the wrong tool when you need a faithful scan of a real object, or a production asset with exact dimensions, since generating code from one image is an interpretation rather than a measurement.

How does img2threejs compare?

Impeccable is the closest relative in spirit, another project that hands a coding agent explicit craft standards instead of hoping the model supplies them, though it governs interface design rather than 3D geometry. Awesome Design.md works the same way at the level of a reference document an agent reads for design direction. img2threejs is narrower and more mechanical than either, since its output is a specific artifact and its pipeline is staged and gated. Video Shotcraft sits in the adjacent visual territory, concerned with moving footage rather than browser geometry. Pick img2threejs only when the deliverable is Three.js code.

Compare with: Impeccable, Awesome Design.md, Video Shotcraft

img2threejs pricing

The catalog records this as free and it is an open-source project, so there is no license to buy. The real cost is model usage, because a staged generation pipeline makes repeated calls and each stage reasons over the work of the previous one. The project explicitly uses deterministic Python validation between stages to keep that spend down, which tells you where the expense sits. Budget for iteration as well, since a first pass on a complex object will usually need another run.

Notes

No notes have been added for this tool yet.

img2threejs FAQ

How is this different from image to 3D mesh tools?
Mesh generators output geometry data, a file of vertices and faces you load as an asset. img2threejs outputs TypeScript that constructs the object at runtime from primitives and shaders. The result is editable and animatable in code, which matters when parts need to move or change, and less suited to exact reproduction.
What kinds of objects does it handle?
The project lists hard-surface objects, humanoid characters and creatures, with a specialized track for CS2 weapon models. Complexity drives quality in an obvious way, so a well-defined object photographed clearly gives a better result than a cluttered scene or something with intricate organic detail.
Do I need to know Three.js to use the output?
You can run the generated scene without deep knowledge, but the value of procedural output is that you can modify it. Some familiarity with Three.js concepts, meshes, materials, lights and the render loop, is what lets you take the generated code and fit it into an application.
Browse all Open Source