Interaktive 3D-bilder: Webens nye dimensjon er her

Tenk deg å legge til et bilde på nettsiden din. Før krevde det bare en enkel <img>-tag. Nå kan du løfte det til interaktive 3D-opplevelser – uten mas og kompliserte rammeverk.

<image-3d> er en lettvekts web component som forvandler vanlige 2D-bilder til levende 3D. Besøkende roterer med musepeker, zoomer med knippe og dykker inn i bildet. Alt dette med en drop-in-løsning som er enkel å bruke.

Hvorfor dette endrer spillet for prosjektene dine

Vanlige bilder virker utdaterte når brukere vil ha mer engasjement. Tenk produktbilder, porteføljer, eiendomsannonser eller arkitekturdokumentasjon. Slike 3D-løsninger har vanligvis trøbbel med:

• Tung backend-behandling
• Store klientbiblioteker
• Høyt ytelsesforbruk
• Dyp kunnskap om WebGL eller 3D-grafikk

<image-3d> fjerner alt dette. Den konverterer 2D til 3D, lager mesh og bruker gaussian splatting i bakgrunnen. Du kan fokusere på innholdet ditt.

Kom i gang på null komma niks

Integrering tar bare to linjer kode.

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

Lim det inn i HTML-en din. Ferdig. Ingen npm, ingen bygging, ingen konfig. Komponenten setter seg opp selv.

Bruk en moderne IDE med AI-støtte? Be den generere koden for deg. Den legger til komponenten, peker på riktige bilder og viser endringene.

Tilpass uten hodebry

Enkelhet går ikke på bekostning av kontroll. Bruk attributter for finjustering:

Viktige attributter:

• src (obligatorisk) – Bildets URL. mukba.ng behandler det og lager mesh-forhåndsvisning pluss detaljert 3D-splat.
• width / height – Sett størrelse med piksler eller CSS-enheter som 50% eller 40vw.
• loading="lazy" – Last kun når bildet er synlig. Smart for sider med mange embeds.
• nobrand – Fjern merkelappen hvis du hoster selv eller har lisens.

Styling med CSS-variabler:

Shadow DOM holder stiler isolert. Unngå globale CSS-problemer:

image-3d {
  --image-3d-max-width: 600px;
  --image-3d-max-height: 80vh;
  --image-3d-radius: 8px;
}

Fleksibelt og trygt.

Hendelser for utviklere med krav

Komponenten sender custom events for livssyklus:

const el = document.querySelector('image-3d');
el.addEventListener('image-3d:loading',  () => console.log('Laster...'));
el.addEventListener('image-3d:progress', (e) => console.log('Fremdrift:', e.detail));
el.addEventListener('image-3d:ready',    () => console.log('Klar for bruk'));
el.addEventListener('image-3d:error',    (e) => console.warn('Feil:', e.detail.error));

Perfekt for lastespennere, analyse, retry eller fallback. Den viser alltid originalbildet hvis noe går galt.

Ytelse som imponerer

Først kommer lett mesh-forhåndsvisning (~11KB) for lynrask rendering. Deretter fades detaljert 3D-splat inn. Progressiv lasting gir umiddelbar feedback.

Brukere roterer med drag, zoomer med pinch og reseter med langtrykk. Intuitivt fra start.

Passer inn overalt i tech-stakken din

Som standard web component fungerer den med alt:

• React / Vue / Svelte – Sett rett inn i templatene.
• Statiske sider – Ideell for blogger, porteføljer og docs uten JS-rammeverk.
• Next.js / Nuxt – Håndterer server-rendering og lazy loading.
• Vanlige server-renderede apper – Ren HTML som går overalt.

Den store visjonen

Web components modnes raskt. <image-3d> viser hvordan 3D-rendering, ML-prosessering og sanntid blir tilgjengelig med én script-tag.

Ingen lock-in, ingen avhengigheter. Bare smart abstraksjon over avansert tech.

For e-handel, designporteføljer, eiendom eller blogger – dette er et must i verktøykassa.

Klar til å teste?

Sjekk mukba.ng/image-3d/docs for full doku. Ta et bilde, legg inn to linjer kode, og se brukerne dine utforske i 3D.