How to Turn an Image into Clean Three.js Code Without Heavy Meshes and Neural Network Junk

Most 3D generators from images output heavy binaries. The result is a dense mesh of hundreds of thousands of polygons, smeared baked textures, and no way to manually tweak anything in code. If you need a simple model for website interactivity or a lightweight scene in the browser, you don't want to load a five-megabyte GLTF file just for one object.

The img2threejs project approached the problem from a different angle. Instead of photogrammetry and polygon mesh export, it analyzes the image and writes procedural TypeScript code for Three.js. The model is assembled at runtime from basic primitives, shaders, and mathematical curves.

What's Under the Hood

The core concept is straightforward: the generated model should be source code rather than a heavy binary asset. You feed the script a single photo or artwork, and you get back a factory function createObjectNameModel() that returns a regular THREE.Group.

Inside this object, the node hierarchy is already defined:

• Rotation points (pivots) and sockets for attaching items.
• Colliders for click handling and physics.
• An update method in userData.tick for continuous background animation.
• Procedural materials that respond to scene lighting rather than being baked in.

The code is organized into clear layers. You can open it in an editor, adjust a fillet radius, change metal roughness, or rewrite animation logic in a couple of minutes.

Why the LLM Doesn't Go Mad from Token Consumption

If you force a language model to write a Three.js scene from scratch based on an image, it will quickly burn through the entire context trying to guess coordinates blindly. The creators of img2threejs split the work between deterministic scripts and neural network vision agents like Claude Code or Codex.

All the routine work is offloaded to a local pipeline in pure Python 3.10 with zero external dependencies. No heavy libraries like Pillow or PyTorch: PNG parsing and color math work through the standard modules struct and zlib.

The scripts handle the mechanics:

• Slice the reference into material zones and analyze the color palette using the CIEDE2000 formula.
• Build an intermediate object specification ObjectSculptSpec.
• Validate component dimensions and block assembly until code generation if the description is missing key elements.
• Assemble a comparison checklist (original side by side with the current render).

The model spends tokens exclusively on decision-making: it looks at the paired render image and says whether the current step passed validation or if the geometry needs tweaking.

Assembly follows strict stages: from rough draft to structure, then to form, materials, lighting, and final optimization. If the model tries to cheat and draw something with a texture that should be honest geometry, the internal validation rejects the pass and sends the code back for correction.

What the System Can Do in Practice

The repository has a gallery with live examples where you can rotate each object in the browser and immediately view the generated TypeScript code.

The demos include detailed weapon skins from CS2, a BMX bike, earbuds in a charging case, and an isometric house diorama. The tool excels particularly with hard-surface objects. Small bevels, screw cutouts, panel joints, and transitions from matte plastic to gloss decompose into primitives with high precision.

A separate generation branch is designed for characters and animals. The script marks facial anatomy anchor points and body proportions, trying to preserve silhouette recognizability, although you shouldn't expect a photorealistic human scan at the output.

How to Run and Try It Out

The fastest integration method is to add the project as a skill for Claude Code or Codex. Just clone the repository into the agent's working folder:

git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs

After that, you can attach an image in the agent chat and invoke the command:

/img2threejs Собери этот предмет в виде модели Three.js, сохрани пропорции и цвета.

If you want to run the steps manually through the terminal, scripts are launched directly from the forge directory:

python3 forge/stage1_intake/probe_image.py reference.png
python3 forge/stage2_spec/new_pre_spec_assessment.py "MyModel" --image reference.png --out assessment.json
python3 forge/stage2_spec/new_sculpt_spec.py "MyModel" --image reference.png --assessment assessment.json --out spec.json
python3 forge/stage2_spec/validate_sculpt_spec.py spec.json --strict-quality
python3 forge/stage3_build/generate_threejs_factory.py spec.json --out src/createMyModel.ts

At the output, you get a ready createMyModel.ts file and a JSON manifest with all the build parameters.

Honest Limitations

The project authors are upfront about the boundaries of applicability. From a single photo, it's impossible to 100% reconstruct the hidden sides of an object. If the reference doesn't show the back of the item, the system either mirrors the front geometry or makes a careful guess, marking the area as low-detail.

The tool won't replace a professional 3D modeler for creating complex AAA characters with rigging. Its niche is rapid generation of interactive items, environments, widgets, and dioramas where zero bundle weight and full code readability are critical.

Summary

The project definitely deserves a bookmark for web developers and indie game creators using Three.js. If you're tired of manually assembling simple 3D assets from cubes and cylinders or loading heavy meshes on landing pages, the img2threejs approach saves hours of routine work. You get lightweight, extensible code that fits perfectly into a typed frontend.