Vibe Coding Discoverimg2threejs
View on GitHubRebuild the object in a reference image as a code-only, procedural, quality-gated, animation-ready Three.js model. Token-efficient image-to-3D.
Agent-agnostic skill and pipeline that turns one reference image into a code-only, quality-gated, animation-ready Three.js model in TypeScript, with rigging-ready hierarchy, GLB export and Playwright-based visual audits. Runs under Claude Code, Codex or OpenCode.
Use Cases
Turn a single reference image into an animation-ready Three.js group factory in TypeScriptGenerate code-only 3D props and characters for browser demos without mesh filesProduce rigged low-poly humanoid and character models with pivots, sockets and collidersRecreate weapons, gadgets and vehicles as procedural Three.js geometryExport generated models to GLB for external pipelinesRun image-to-3D reconstruction from Claude Code, Codex or OpenCode agentsCapture and audit rendered results headlessly with Playwright for quality gatingKeep token cost low by reconstructing in code instead of photogrammetry or mesh extraction
Built With
- Language
- Python
- Frameworks
- Three.js · WebGL · Claude Code · Codex · OpenCode · Playwright
Tags
image-to-3d · threejs · procedural-generation · code-generation · agent-skills · claude-code · ai-agents · webgl · glb-export · character-rigging · animation-ready · quality-gates · token-efficiency · playwright · python · typescript