An image to 3D converter that measures your photo, has your AI build the object in three.js code, and checks it side by side until it matches.
Add a photo of an object. Your AI builds it in three.js code, and this page measures, checks and compares it until it matches.
Add photos or a video
Start with 1 clear photo of the object. More photos, or a short video going around it, help your AI see the sides.
Works best for objects like phones, laptops and cameras. Up to 6 photos. The first is the one the tool measures; click another to use it instead. A PNG with a transparent background works best.
This free image to 3D converter turns a photo of an object into a real three.js model: code you can read, change and animate, made of named parts. You add the photo, your own AI writes the model, and this page measures it, checks it and puts it side by side with your photo until it matches.
It also opens any GLB and turns it into what a website needs: a compressed model and a lighter one for phones, the React and three.js code to show it, a file for AR on iPhone, and a spin GIF or video for your newsletter.
Your photos, your code and your model stay in your browser. The code your AI writes runs in a locked-down frame on this page that can't reach the internet.
What is an image to 3D converter?
An image to 3D converter turns a flat picture into a 3D model: an object you can turn all the way around, light, animate, and put on a website, in AR or on a 3D printer.
There are 3 ways to make one. A scan stitches dozens of photos into a mesh. An AI mesh model guesses the whole object from 1 photo on a graphics card. A rebuild writes the object as code, part by part, from simple shapes.
This converter does the rebuild. Your AI writes the object in three.js, and this page measures your photo, checks the model and compares the 2, so you end up with a light, clean model whose parts have names you can change and animate.
three.js is a free, open source JavaScript library for drawing 3D in a web page, and React Three Fiber is the way to use it in React. A three.js model runs in any modern browser, on a phone too.
Examples: 1 photo in, a 3D model out
Each of these started as 1 photo of a real product. An AI wrote the model in three.js code from this tool's prompt and measurements, Compare checked it against the photo, and the spin came out of the tool's own GIF export. Press an example above to open any of them in the tool and turn it yourself.
iPhone 18 Pro Max in Burgundy, the same model as the phone in the navid.me newsletter box: the camera plateau with 3 lenses, flash and LiDAR, the glass back with the Apple mark, and the buttons in their slots. Turn it around and the navid.me newsletter is on its screen. Photo: 茅野ふたば, CC BY-SA 4.0.
Leica Q3 with its Summilux 28 mm lens: the knurled aperture ring, the square hood, the shutter speed dial and the red dot with its white script. The photo was taken on a wooden table, and the tool cut the camera out by itself. Photo: Burkhard Mücke, CC BY 4.0.
Sony A7 IV with the FE 24-105 mm F4 G: the deep grip, the viewfinder hump and shoe, the mode dial, and the ribbed zoom and focus rings. Photo: Bautsch, CC0.
MacBook Pro 16-inch: every key in 1 instanced part, the speaker grilles, the trackpad, the notch, and the lid on its hinge. The screen is its own part, so any image or video can go on it: here, the navid.me newsletter page. Photo: AzureSaturn.jpg), CC0.
How to turn a photo into a three.js model
The first answer is a blockout: the right proportions and the main parts. Each pass after it adds 1 kind of detail, so nothing gets lost along the way.
Why your AI gets measurements, not just a photo
AI models read photos well, but they judge proportions by eye, like anyone. So before your AI sees anything, this page measures the photo:
| Measured | How | What your AI does with it |
|---|---|---|
| Outline | The object's edge, traced and cut to 48 points | Builds the shape to those points instead of eyeballing it |
| Width to height | The object's own box, not the photo's | Gets the proportions right in the first pass |
| Colors | Its main colors from its own pixels, with how much of it each covers | Uses your hex values, not "silver" |
| Symmetry | How well the left side mirrors the right | Mirrors parts only when the object does |
| Round profile | For bottles, mugs and lamps: the radius at 16 heights | Turns the profile with a LatheGeometry, the exact shape |
| Real size | The size you type, from the maker's specs | Builds to the millimeter |
The background has to come off for this to work. On a plain wall or table, the page finds the object by itself. A PNG with a transparent background works best of all.
The passes, from blockout to done
| Pass | What it adds |
|---|---|
| Blockout | The right proportions and the main parts |
| Structure | Every part in place and joined, nothing floating |
| Form | The true shapes: curves, bevels, rounded corners |
| Materials | Colors and finishes: metal, plastic, glass, gloss and matte |
| Surface | Small details: seams, buttons, screws, holes and lines |
| Lighting | How it catches the light: roughness, metalness, clearcoat |
| Interaction | Moving parts on their own pivots, and an idle motion |
| Optimization | Fewer triangles and draw calls, with the same look |
You can skip passes. A logo on a mug needs Materials and Surface, and a lamp that folds needs Interaction.
How to read the comparison
Compare draws your model from the front, right, back and left, and puts your photo beside them on 1 sheet. It also scores the front view against your photo, on 4 counts:
- Outline: how much the 2 outlines overlap. It's the first thing to get right.
- Width to height: a matching outline can still be stretched, and this catches it.
- Color: the difference between your photo and the render inside the outline, measured with CIEDE2000, the standard formula for how different 2 colors look.
- Detail: light and dark inside the outline. A missing button or label barely moves the outline, but it moves this.
The scores are this tool's own scales, from 0 to 100%, made to compare 1 pass with the next. They aren't a grade. Your photo has real light and shadows and the render has studio light, so 100% on color isn't the goal. Look at the sheet as well as the numbers.
Photos that work best
- The whole object in the frame, with space around it
- A plain background: a wall, a sheet of paper or a table
- Sharp and evenly lit, without hard shadows
- Straight on for the first photo: the front, at the object's height
- Up to 5 more photos of the sides and back, or 1 video going around it
1 photo shows 1 side, so your AI has to guess the back. Every extra side it sees is a side it doesn't have to guess.
Phones, laptops and screens
Tick "It has a screen" and your AI builds the screen as its own flat part, named screen. Then "Put an image or video on the screen" shows your own picture on it: your newsletter, your site or a video. It's a device mockup of your own work that you can turn in 3D.
navid.me's own 3D iPhone is built this way: in three.js code, sized from Apple's published measurements, with the screen as its own part. Use your own photos of your own device, since makers' product photos are copyrighted.
Put it on your website
The website package is 1 zip with everything a page needs:
| File | What it is |
|---|---|
| model.glb | The model, compressed with meshopt |
| model-mobile.glb | About half the triangles, for phones |
| model.usdz | For AR on iPhone and iPad |
| Model.tsx | A React Three Fiber component |
| ModelVanilla.ts | A plain three.js loader |
| model-viewer.html | A snippet for Webflow, Framer, WordPress or any page |
| materials.json | Its materials, lighting and camera |
| preview.png | A picture of it |
| README.md | The files, with its measured size, triangles and draw calls |
No code? Paste model-viewer.html where the model should go, and upload the files beside it. It uses model-viewer, Google's free web component for 3D, which also gives iPhone visitors a button to see the model in AR.
Keep it fast
A 3D model is heavy next to the rest of a page. The checks flag a model over 100,000 triangles or 50 draw calls, this tool's own limits for a phone. Every part with its own material is 1 more draw call, so shared materials help most, and 4 or more identical parts should be 1 InstancedMesh.
Show 1 3D scene per page where you can. Browsers only allow so many WebGL scenes at once, and past that they close the oldest.
3D print it, or see it in AR
STL is the file 3D printers' apps (slicers) open. Open it in your slicer before you print: it shows walls too thin to print, which a model made for screens often has.
USDZ opens in AR Quick Look on iPhone and iPad. Tap the file and put the model on your desk, at its real size if you gave it one.
What 1 photo can't tell you
This is a rebuild, not a scan. Your AI draws the object from simple shapes, so it's light, clean and easy to change, but it isn't a copy of every scratch. Sides the photos don't show are guesses. For a quick result, 1 photo is enough. For a close one, give it more sides and a few passes.
Image to 3D Converter FAQs
Questions about turning an image into 3D? Here's what to know.
An image to 3D converter turns a photo into a 3D model you can turn all the way around. This image to 3D converter has your own AI rebuild the object in three.js code, then measures, checks and compares it with your photo until it matches.
Yes, this image to 3D converter is free, with no sign-up and no watermark. The AI part runs in your own Claude or ChatGPT, so you can use it as much as your AI plan allows.
No, the image to 3D converter keeps your photos, code and model in your browser. The code your AI writes runs in a locked-down frame on this page with no internet access. Your photo only leaves your device when you paste it into your own AI chat.
Yes, the image to 3D converter gives you a full model you can turn all the way around, but 1 photo shows only 1 side, so your AI guesses the back. Add photos of the other sides, or a short video going around the object, and it guesses less.
You can use the image to 3D converter with any AI chat that reads images and writes code, such as Claude, ChatGPT or Gemini. The buttons open each one with the prompt filled in. You paste the photo yourself, because a link can't attach an image.
The image to 3D converter downloads GLB, glTF, OBJ, STL, PLY and USDZ models, a PNG, a spin GIF and a spin video. The website package puts a compressed model, a lighter phone model, an AR file and the code to show them in 1 zip.
Download the website package from the image to 3D converter and use the file that fits your site: Model.tsx for React Three Fiber, ModelVanilla.ts for plain three.js, or model-viewer.html for Webflow, Framer, WordPress or any HTML page.
Yes, download the STL from the image to 3D converter and open it in your printer's slicer. Check it there before printing, since a model made for screens can have walls too thin to print.
The image to 3D converter is for creators, founders, designers and developers who want a real 3D model of a product or an object: for a website, a newsletter, a post or an AR preview, without learning Blender.
The DESIGN.md generator turns your colors and fonts into a file your AI can build from, the post image generator makes images of your posts, and the QR code generator makes codes for print. See all free tools.
Navid Moazzez
AI business strategist & AI OS builder
Navid Moazzez helps creators and founders master AI and build their own AI Operating System (AI OS) to automate their business and life.
Navid.me is reader-supported. When you buy through links on this site, I may earn an affiliate commission. Learn more.
More free tools
X
LinkedIn
Bluesky
Apple Books
Amazon
Free AI newsletterThe most actionable AI newsletter for founders
Every week, get proven AI strategies, curated tools, and step-by-step systems to grow your audience, create better content, and build a profitable creator business.
No fluff, no filler, no BS. Just five minutes each week that might level up your online business and life.
P.S. Sign up now to get free access to my ultimate AI tools guide for creators.
