Skip to content

Image to Three.js 3D Model

by img2threejsSkillMake visuals

Rebuilds the object in one photo as a 3D model written in Three.js code

View on GitHub

About Image to Three.js 3D Model

A skill that has your AI agent rebuild the object or character in one reference image as a 3D model made only from code. You get a TypeScript file for the Three.js web 3D library, a JSON spec and comparison renders.

For Game and web makers3D hobbyistsThree.js developers

Made by img2threejs

An open-source project published on GitHub by the img2x organisation, which also runs a showcase site of live Three.js models.

Stars
★ 20k
License
Apache-2.0
Cost
Usage-based
Level
Advanced
Contents
Includes scripts

Overview

img2threejs is a skill that has your AI agent rebuild the object or character in a single reference image as a 3D model made only from code. The agent writes a spec, builds the model in stages and compares each render with your image before it moves on. You get a TypeScript file for the Three.js web 3D library, a JSON spec and comparison renders. It suits game and web makers and hobbyists who are comfortable running a few install commands.

It builds the model from code instead of downloading a mesh, so the result is small, editable text, and it can tell you which parts it had to guess.

Try these first

Start with the first one: it is a small task you can check easily.

  1. /img2threejs Rebuild the object in [image path] as a procedural Three.js model. Report the output files and show a render next to my photo.First try · writes files

  2. Rebuild the object in [image path], keep its proportions and colours, and list any regions you had to infer.

  3. Rebuild [image path] at low effort. I only need the evaluation render, not a presentation.

  4. Add pivots for the parts that should move and a slow looping idle animation to the model.edits files

Example prompts written by Agent Flows Hub.

What you get

From the creator's documentation.

OutputWhat it isReads
Model codeA TypeScript file that builds the object as a Three.js group, ready to animateYour project folder
Sculpt specA JSON spec with the parts, materials and the review history of each passYour project folder
Render checksSide-by-side sheets of your image and each build pass, used to accept or redo itYour agent
CharactersA separate track for people and characters with proportion and face checksYour agent
PluginsOptional add-ons, such as rigging or game weapon skins, installed with a separate commandnpm and GitHub

Good to know

Turn a reference photo of an object, prop or character into a Three.js model you can place on a web page or in a game. The agent plans the parts, builds them pass by pass and checks each render against the photo.

Limits

  • One image cannot show hidden sides. The project records unseen areas as low confidence and may ask for more views instead of inventing detail.
  • The output is Three.js TypeScript code plus renders, so you need a web project or page to use the model, and each run spends agent tokens.

Notes by (original project name: img2threejs), written from the creator's documentation, not from running it ourselves. img2threejs README · img2threejs installation guide

Stuck setting it up?

Tell us what happened. We take a look first; if it needs paid work, you get an estimate before anything starts.

Get help

Other skills

  • Impeccable Gives your coding agent design commands to critique, polish and restyle web pages
  • Infographic Designer Turns text into a single infographic and lets you choose from suggested looks
  • Instant Chart Maker Turns a table of numbers into a ready-made chart image in seconds
  • Internal Comms Writer Drafts status updates, newsletters and FAQs in a consistent house style
  • Kami Lays out resumes, one-pagers, letters and slide decks as print-ready PDFs
  • Khazix-Style Article Writer Turns your notes into a long Chinese article in the voice of writer Khazix

See all 140 skills · A skill is installed but not loading

GitHub