Web Component
A drop-in web component that turns any photo into a rotatable 3D scene — drag to orbit, pinch to zoom. Runs entirely in your browser, no server 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.
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>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>
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. |
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. |
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));<image-3d> elements on the page — downloaded once, loaded once.image-3d:error event fires. The drop zone stays interactive so the user can try again.此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。