Skip to content
img2threejs Turns One Photo Into Procedural Three.js Code

img2threejs Turns One Photo Into Procedural Three.js Code

Hoài Nhớ's img2threejs rebuilds an object from one reference image as procedural, animation-ready Three.js code, with v1.3 improving geometry reconstruction and material generation.

Details

Published

What it is

img2threejs takes a single reference image and asks an agent to rebuild the object as procedural Three.js code, not a mesh extraction, photogrammetry scan, or asset-pack shortcut.

Hoài Nhớ is not trying to turn a photo into a downloadable mesh. The project rebuilds the subject as a code-only Three.js model made from primitives, procedural shaders, generated geometry, pivots, sockets, and colliders. The live gallery makes the idea concrete: a BMX bike, a Doppler M9 bayonet, earbuds, knives, a shotgun, a tiny isometric house, and a loot chest all running in the browser as generated TypeScript rather than imported model files.

The repo is explicit about the pipeline: detail inventory, quality gates, runtime hierarchy, and an agent-agnostic workflow for Claude Code, Codex, or OpenCode. It is a documented attempt to make the magic inspectable.

How it’s made

Technology
WebGL
Framework & Tool
Three.js