Image-3D
photo to 3D splat that runs in the browser
Last verified:
What is Image-3D?
Image-3D is a drop-in web component that turns any 2D photo into an interactive 3D scene that runs entirely in the browser. By adding just two lines of code to an HTML page, developers can embed rotatable 3D visuals where users can drag to orbit, pinch or scroll to zoom, and long-press to reset the camera. The tool uses depth inference on load to generate a 3D Gaussian splat from the input image, delivering a mesh preview first (~11KB) for instant painting, then crossfading to the full splat.
Key features include three usage modes: a drop zone where users supply photos interactively, a src mode that runs depth inference on a given photo URL (~30 MB model download, ~1 GB RAM during inference), and a model mode that loads pre-built .mspz splats directly without inference or model download. The component uses shadow DOM to prevent host page CSS from interfering, supports lazy loading, and exposes lifecycle events (loading, progress, ready, error) for custom integration. It also includes attributes like nobrand to hide the attribution pill, nosway to disable intro rotation, and no-download to hide the download button.
Image-3D is designed for web developers, frontend engineers, and content creators who want to add interactive 3D photo embeds to websites without building Gaussian Splat infrastructure. It works natively in React, Vue, Svelte, and other frameworks as a standard custom element without wrappers. The tool is ideal for blogs, e-commerce product pages, portfolio sites, and any web application where engaging 3D visuals improve user experience.
Image-3D pricing
Pricing model: Freemium
The tool is free to use with no paid plans mentioned. The embed.js script can be added to any HTML page without registration or payment. There is no indication of subscription tiers, credit systems, or paid features on the website. The ~30 MB depth model is downloaded once and shared across all <image-3d> elements on the page.
Image-3D pros
- Runs entirely in the browser with no server required
- Only two lines of code to embed
- Works natively in React, Vue, Svelte without wrappers
- Mesh preview paints almost immediately (~11KB)
- Drag to orbit and pinch/scroll to zoom controls
- Long-press to reset camera position
- Shadow DOM prevents CSS conflicts with host page
- Lazy loading support with loading=
- Lifecycle events for custom integration (loading, progress, ready, error)
- Singleton depth model shared across all elements on page
- Pre-built .mspz splat mode avoids inference overhead
- Graceful failure - poster image stays visible on error
- nobrand attribute hides mukba.ng attribution pill
- nosway attribute disables intro rotation
- no-download attribute hides download button
- Custom CSS properties for styling (radius, max-width, max-height)
- Explicit width/height attributes override default caps
- Drop zone mode lets users supply photos interactively
Image-3D cons
- ~30 MB model download on first visit for src mode
- ~1 GB RAM usage during depth inference
- Hard cap at 600px width and 80vh height by default
- Requires WebGPU support in browser for inference
- Only generates splat from single 2D photo (no multi-view)
- No server-side inference option - all client-side
- Depth inference may fail on low-quality or flat images
- Cannot customize depth model parameters or seeds
Frequently asked questions about Image-3D
How do users interact with the 3D embed?
Users can drag to orbit the camera, pinch or scroll to zoom in/out, and long-press without dragging to see a blue scrim that resets the camera to center when released.
What is the mesh-first, splat-second behavior?
The small mesh preview (~11KB) paints almost immediately for instant visual feedback, then the larger splat crossfades over once it finishes loading, providing a smoother perceived load time.
Can I customize the size of the 3D embed?
Yes, use width and height attributes to set explicit pixel dimensions. These override the default 600px width cap and 80vh height cap. You can also use CSS values like 50% or 40vw, or set --image-3d-width and --image-3d-height CSS custom properties.
What lifecycle events are available for integration?
The element dispatches four CustomEvents: image-3d:loading (start of fetch), image-3d:progress (with progress detail), image-3d:ready (when splat is loaded), and image-3d:error (with error detail if inference fails). Listen with addEventListener like any DOM element.
What happens if depth inference fails?
The element fires an image-3d:error event with the error detail, but the poster image stays visible so the user always sees something. In drop zone mode, the element stays interactive so users can try uploading another photo.
Does the depth model get downloaded multiple times?
No, the depth model is a singleton shared across all <image-3d> elements on the page. It downloads once on first visit and is loaded once, so multiple embeds don't multiply the download cost.