https://github.com/imichaelnorris/image-3d
A drop-in web component that turns a 2D image URL into an interactive 3D embed. Drag to rotate, pinch to zoom.
https://github.com/imichaelnorris/image-3d
3d component gaussian image splat web
Last synced: 3 days ago
JSON representation
A drop-in web component that turns a 2D image URL into an interactive 3D embed. Drag to rotate, pinch to zoom.
- Host: GitHub
- URL: https://github.com/imichaelnorris/image-3d
- Owner: imichaelnorris
- License: mit
- Created: 2026-05-13T10:04:48.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-06-08T01:17:27.000Z (28 days ago)
- Last Synced: 2026-06-08T01:21:18.912Z (28 days ago)
- Topics: 3d, component, gaussian, image, splat, web
- Language: JavaScript
- Homepage: https://mukba.ng/image-3d/docs/
- Size: 85.9 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ``
[
](https://mukba.ng/?ref=image-3d-embed)
A drop-in web component that turns a photo into an interactive 3D Gaussian splat. Drag to rotate, pinch to zoom. Runs entirely in the browser — no server required.
[**Live demo & docs →**](https://mukba.ng/image-3d/docs/)
## Install
```html
```
## Usage
```html
```
### `src="photo.jpg"` ⚠️ resource-intensive
Runs depth estimation automatically when the element loads.
- Downloads a ~30 MB int8-quantized ONNX model on first visit (cached after that)
- Expands to **~1 GB RAM** at runtime during inference
- Takes a few seconds on fast hardware (Apple Silicon, modern GPU); slower devices may take 10–30s
- The model is a singleton — multiple elements on the same page share one instance
If you have a pre-generated splat, use `model="..."` instead.
## Attributes
| Attribute | Description |
|---|---|
| `src="photo.jpg"` | Auto-run inference on this photo on load. ⚠️ See above. |
| `model="file.mspz"` | Load a pre-generated MSPZ directly. No inference, no model download. |
| `width` / `height` | Explicit dimensions. Bare numbers → px; CSS values (`50%`, `40vw`) work too. |
| `nobrand` | Hide the mukba.ng attribution pill. |
| `nosway` | Disable the intro rotation animation. |
| `no-download` | Hide the download button. |
## CSS custom properties
| Property | Default | Notes |
|---|---|---|
| `--image-3d-max-width` | `600px` | Cap on rendered width. |
| `--image-3d-max-height` | `80vh` | Cap on height. |
| `--image-3d-radius` | `8px` | Corner radius. `0` for sharp. |
| `--image-3d-width` / `--image-3d-height` | `auto` | Also settable via `width`/`height` attributes. |
## Lifecycle events
```js
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 → blue scrim; release to recenter the camera.
- **Shadow DOM.** Use the documented CSS custom properties to restyle; host-page CSS can't bleed in.
- **Singleton model.** The depth model is shared across all `` 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.
---
Made by [mukba.ng](https://mukba.ng/) · © [Fncore, Inc.](https://fncore.com/about)