Web Component
A web component that turns a 2D image URL into an interactive 3D embed. Drag to rotate, pinch to zoom.
Drop these two lines into any HTML page.
<script src="https://mukba.ng/image-3d/embed.js" defer></script>
<image-3d src="/your-photo.jpg"></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/docs/
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. Then ask me which photo I want to convert. To swap one, replace its
<img> with:
<image-3d src="/same/photo/url.jpg"></image-3d>
It's a standard custom element — no wrapper needed in React/Vue/
Svelte/etc.
3. Show me the diff before committing.
Set on the <image-3d> element itself.
| Attribute | Description |
|---|---|
src required | Source image URL. The mukba.ng worker fetches this and generates the 3D artifacts (mesh preview + splat). |
width / height | Explicit pixel dimensions. Overrides the default 600px / 80vh caps. Bare numbers are interpreted as px; full CSS values (50%, 40vw) work too. |
loading="lazy" | Defer the fetch until the element scrolls near the viewport. |
nobrand | Hide the "mukba.ng" attribution pill in the bottom-right corner. |
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:error event fires. The user always sees something.此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。