img-to-3d

Converts a reference image into a procedural Three.js model via code-only primitives.

5|2|Updated Jul 12, 2026
One-click install
npx skills add https://github.com/LongLeo287/seosona-flow --skill img-to-3d-longleo287
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: img-to-3d
Source: https://github.com/LongLeo287/seosona-flow/tree/main/.claude/skills/img-to-3d
Command: npx skills add https://github.com/LongLeo287/seosona-flow --skill img-to-3d-longleo287

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning a single product or object photo into a lightweight, animation-ready 3D web asset normally requires photogrammetry, depth maps, or manual modeling. This Skill rebuilds the object as a code-only Three.js scene using primitives, keeping the result lightweight, git-diffable, and animation-ready. ## Core Features & Use Cases - 8-pass sculpting pipeline: intake analysis, ObjectSculptSpec (JSON), quality gate, blockout, structural detail, PBR materials, lighting/interaction, and geometry optimization. - Spec-gate-build pattern: validates the JSON spec before building, so malformed proportions or missing parts are caught early. - Visual verification loop: renders the scene in a browser, screenshots it, and compares against the original image with a vision model to drive iterative fixes. - Use Case: You have a product photo and need a lightweight Three.js asset for a web page. The Skill produces an ObjectSculptSpec plus a TypeScript factory returning a THREE.Group with sockets and colliders. ## Quick Start Rebuild the object in this reference image as a procedural Three.js model and verify the render against the original photo.

Frequently Asked Questions about img-to-3d

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert an image to a 3D model with Three.js?▼

Analyze the reference image for shapes, proportions, and materials, then write an ObjectSculptSpec JSON describing primitives like boxes, spheres, and cylinders. Build the model through blockout, structural, material, and lighting passes, then verify by comparing a rendered screenshot against the original image.

What is procedural 3D modeling versus photogrammetry?▼

Procedural modeling builds geometry from code-defined primitives and transforms, producing lightweight, editable, animation-ready assets. Photogrammetry reconstructs meshes from many photos, yielding heavy meshes unsuitable for code review. This approach uses only primitives, no depth maps or point clouds.

Can a single image produce an accurate 3D model?▼

A single image constrains accuracy to visible surfaces and estimated proportions. The workflow compensates with a visual verification loop that screenshots the rendered scene, compares it to the source image with a vision model, and iterates on layout, proportion, and color differences.

Does this approach support animation and interaction in Three.js?▼

Yes. The output TypeScript factory returns a THREE.Group that can include sockets, colliders, and animation groups defined in the spec. The optimization pass merges geometry and reduces draw calls so the asset stays performant for interactive web scenes.

When should I not use code-only primitive modeling?▼

Avoid it when you need photorealistic surface detail, organic scans, or exact replicas of complex geometry, since primitives approximate rather than reconstruct. Use photogrammetry or mesh reconstruction tools for those cases instead.