Skip to content
PhotoTo3D Docs
Esc
↑↓navigate↵open⌘Jpreview
On this page

Image to Three.js: turn one photo into editable 3D code

A practical workflow for converting a single reference image into an editable Three.js model, with honest limits, export options, and integration steps.

PhotoTo3D converts a clear reference image into an editable Three.js model made from named geometry and materials. Upload a photo, review the generated structure, adjust the result in the browser, then export readable TypeScript or GLB for a web project.

This is procedural reconstruction, not photogrammetry. The result is designed to be lightweight, understandable and easy to animate. A single image cannot reveal hidden sides or exact dimensions, so unseen details remain an informed approximation.

How to convert an image to a Three.js model

1. Choose a useful reference image

Start with a PNG, JPEG or WebP where the object fills most of the frame. A three-quarter view is usually more useful than a straight-on view because it shows the front, side and some depth at once.

Use even lighting and avoid motion blur, heavy occlusion, cropped parts and wide-angle distortion. If the exact back or underside matters, one image is not enough; add consistent side and rear references when the workflow allows it.

2. Generate and inspect the structure

Open PhotoTo3D Studio, upload the reference and start a build. The workflow first identifies the visible parts, proportions, palette and likely geometry before producing the interactive preview.

Inspect the silhouette from several angles. Then check attachment points, material boundaries and the model hierarchy. Fix the largest structural mismatch before polishing color or surface detail.

3. Export readable Three.js code

The TypeScript export returns a standard THREE.Group. Its children are normal Three.js objects, so the model can be added directly to a scene and edited with the same APIs you already use.

import * as THREE from 'three';
import { createObjectModel } from './models/create-object-model';

const scene = new THREE.Scene();
const model = createObjectModel();

scene.add(model);
model.rotation.y = Math.PI * 0.25;

The generated group also exposes named parts through userData.sculptRuntime.nodes. Use those stable names for animation and interaction instead of depending on child-array positions.

const runtime = model.userData.sculptRuntime;
runtime.nodes.lid.rotation.x = -0.35;

Three.js documents Group as the standard container for manipulating related objects together. If your delivery pipeline needs a binary asset, export GLB; the Three.js manual recommends glTF for importing and exporting 3D assets.

TypeScript factory or GLB?

Choose the TypeScript factory when you want readable source, named procedural parts, runtime material changes or direct control over animation. It is also useful when the 3D object is part of an interactive product experience rather than a static asset.

Choose GLB when you need a compact interchange file for a conventional asset pipeline, a content management system or a tool that does not consume Three.js source code. PhotoTo3D lets you preview the procedural result before deciding which format fits the project.

Use the result in React Three Fiber

React Three Fiber can mount the returned THREE.Group with <primitive>. Create the group once so React does not rebuild the model on every render.

import { useMemo } from 'react';
import { createObjectModel } from './models/create-object-model';

export function ProductModel() {
  const model = useMemo(() => createObjectModel(), []);
  return <primitive object={model} />;
}

See the React Three Fiber guide for animation and disposal, or the code export guide for the runtime contract.

What one image cannot recover

A single photo does not contain the true geometry behind the object, its internal construction or an absolute scale. Reflections and shadows can also look like physical edges. PhotoTo3D therefore treats hidden geometry as uncertain instead of claiming a scan-quality reconstruction.

For the strongest result:

  • keep the whole object visible;
  • prefer a distinct silhouette and clear part boundaries;
  • use a three-quarter camera angle;
  • provide extra views for important hidden surfaces;
  • validate shape before materials and lighting.

Read known limits before using a generated model as a production hero asset.

Frequently asked questions

Can one photo become a complete 3D model?

It can become a useful editable reconstruction, but not an exact scan. Visible shape and structure guide the model; hidden surfaces and depth must be inferred.

Does the exported model require PhotoTo3D at runtime?

No. The TypeScript export uses standard Three.js geometry and materials, and the GLB export can be loaded through a normal glTF workflow.

Can I animate individual parts?

Yes. Named nodes and pivots remain available in the exported runtime contract. This works well for lids, wheels, buttons, turrets and other separable parts.

Is this better than a mesh-based image-to-3D tool?

It depends on the goal. Procedural code is useful when editability, low runtime weight and named interactive parts matter. A dense mesh or neural reconstruction is often a better fit for organic surfaces and photoreal scans.

Ready to try it? Open Studio and build from an image →

Was this page helpful?