How do I turn a photo into a 3D model on a web page?

Add the image-3d script tag to your page and use . The component generates a gaussian splat from the photo and renders it as a draggable, zoomable 3D scene — entirely in the browser, with no server.

Is image-3d photogrammetry or gaussian splatting?

image-3d uses a gaussian splatting pipeline to reconstruct a 3D scene from a single photo. It does not require the many overlapping photos that traditional photogrammetry needs.

Does image-3d need a server or build step?

No. It is a single drop-in web component. Inference runs in the browser, or you can point it at a pre-built .mspz splat with the model= attribute to skip on-device generation.

Web Component

`<image-3d>`

A drop-in web component that turns any photo into a rotatable 3D scene using gaussian splatting — drag to orbit, pinch to zoom. Runs entirely in your browser, no server or photogrammetry rig required.

Heads up: Inference mode (src=) downloads a ~30 MB depth model and uses ~1 GB RAM during processing. Use model= with a pre-built splat to avoid this on every page load.

Open demo ↗ Try with your photo ↗

Install

One script tag. Three modes — pick the one that fits.

<script src="https://mukba.ng/image-3d/embed.js" defer></script>

<!-- Drop zone: user supplies the photo; nothing loads until they do -->
<image-3d></image-3d>

<!-- src=: generates 3D from this photo on load (~30 MB download, ~1 GB RAM) -->
<image-3d src="/photo.jpg"></image-3d>

<!-- model=: loads a pre-built .mspz splat — no inference, no model download -->
<image-3d model="/model.mspz"></image-3d>

Add it with Claude Code

Paste this prompt into Claude Code in your project directory.

Add the <image-3d> web component to this project.

Reference docs: https://mukba.ng/image-3d/

Steps:
1. Add this script tag once, in the <head> of the main HTML template
   (or shared layout):
   <script src="https://mukba.ng/image-3d/embed.js" defer></script>
2. Pick the mode that fits:

   <!-- Drop zone: user supplies the photo; nothing loads until they do -->
   <image-3d></image-3d>

   <!-- src=: generates 3D from this photo on load
        (~30 MB model download, ~1 GB RAM during inference) -->
   <image-3d src="/photo.jpg"></image-3d>

   <!-- model=: loads a pre-built .mspz splat directly
        (no inference, no model download — fastest first load) -->
   <image-3d model="/model.mspz"></image-3d>

Attributes

Set on the <image-3d> element itself.

Attribute	Description
`src="photo.jpg"`	Run depth inference on this photo when the element loads. Downloads ~30 MB model on first visit; uses ~1 GB RAM during inference.
`model="file.mspz"`	Load a pre-built MSPZ splat (the compressed point-cloud format `<image-3d>` generates) directly. No inference, no model download.
`width` / `height`	Explicit pixel dimensions. Overrides the default 600px / 80vh caps. Bare numbers are interpreted as px; full CSS values (`50%`, `40vw`) work too.
`nobrand`	Hide the "mukba.ng" attribution pill in the bottom-right corner.
`nosway`	Disable the intro rotation that plays once when the splat loads.
`no-download`	Hide the download button.

CSS custom properties

The element uses shadow DOM, so the host page's CSS can't bleed in. Set these on the host element to restyle.

Property	Default	Notes
`--image-3d-max-width`	`600px`	Hard cap on rendered width.
`--image-3d-max-height`	`80vh`	Hard cap on poster height (and thus overall height).
`--image-3d-radius`	`8px`	Host corner radius. Set `0` for sharp.
`--image-3d-width` / `--image-3d-height`	`auto`	Set by the corresponding attributes; you can also set these directly via CSS.

Lifecycle events

The element dispatches CustomEvents on itself. Listen the way you would on any DOM element.

const el = document.querySelector('image-3d');
el.addEventListener('image-3d:loading',  (e) => console.log('start'));
el.addEventListener('image-3d:progress', (e) => console.log('progress', e.detail));
el.addEventListener('image-3d:ready',    ()  => console.log('ready'));
el.addEventListener('image-3d:error',    (e) => console.warn('error', e.detail.error));

Behavior notes

Controls. Drag to orbit, pinch or scroll to zoom.
Long-press to reset. Hold without dragging for a blue scrim; release to recenter the camera.
Shadow DOM. Nothing on the host page can override the embed's internal styling unless you use the documented CSS custom properties.
Singleton model. The depth model is shared across all <image-3d> elements on the page — downloaded once, loaded once.
Graceful failure. If inference fails, an image-3d:error event fires. The drop zone stays interactive so the user can try again.