Interaktiva 3D-bilder: Webben får ett lyft med ny teknik

Tänk dig att lägga till en bild på sajten med bara en <img>-tag. Det funkar fortfarande perfekt. Men nu kan du ge bilderna liv med 3D-interaktion – utan krångel eller tunga ramverk.

<image-3d> är en webkomponent som förvandlar vanliga 2D-foton till roterbara, zoombara upplevelser. Användare drar för att snurra runt, nyp för att zooma. Allt känns fräscht och modernt. Och det är en ren drop-in-lösning.

Varför det här förändrar ditt webbprojekt

Vanliga stillastående bilder räcker inte längre. Folk vill ha interaktion. Tänk produktbilder, portföljer, bostadsannonser eller arkitektskisser. De blir plötsligt levande.

Vanliga 3D-verktyg kräver ofta:

• Komplicerad serverbehandling
• Tjocka klientbibliotek
• Prestandaproblem
• Kunskaper i WebGL eller 3D-grafik

<image-3d> sköter allt det där i bakgrunden. Konvertering från 2D till 3D, mesh-generering och gaussian splatting – du slipper bry dig.

Kom igång på nolltid

Det tar två rader kod. Punkt slut.

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

Inga npm-paket. Ingen build. Inga config-filer. Komponenten registrerar sig själv och fixar resten.

Använder du en IDE med Claude Code? Låt AI:n fixa det åt dig. Beskriv vad du vill ha, så lägger den in komponenten, pekar ut rätt bilder och visar diffen. Supersmidigt.

Anpassa utan huvudvärk

Enkelhet är nyckeln, men du kan ändå styra beteendet med attribut:

Viktiga attribut:

• src (måste) – Länken till din bild. mukba.ng-processen skapar mesh-förhandsvisning och detaljerad 3D-splat.
• width / height – Sätt egna mått. Pixlar eller CSS-enheter som 50% eller 40vw.
• loading="lazy" – Ladda när bilden syns i vyfönstret. Bra för sidor med många bilder.
• nobrand – Ta bort loggan om du hostar själv eller har licens.

Styla med CSS-variabler:

Shadow DOM skyddar interna stilar. Använd variabler istället:

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

Perfekt balans: kontroll utan risk för kaos.

Häng på eventen för proffs

Vill du koppla in dig i livscykeln? Lyssnar på custom events:

const el = document.querySelector('image-3d');
el.addEventListener('image-3d:loading',  () => console.log('Laddar...'));
el.addEventListener('image-3d:progress', (e) => console.log('Framsteg:', e.detail));
el.addEventListener('image-3d:ready',    () => console.log('Redo för action'));
el.addEventListener('image-3d:error',    (e) => console.warn('Fel:', e.detail.error));

Visa loaders, spåra statistik, hantera omstarter eller fallback. Komponenten visar alltid originalbilden vid problem – ingen ser trasiga layouter.

Klok prestanda i botten

Smart grej: Först laddas en lätt mesh (~11KB) för blixtsnabb visning. Sedan crossfade till detaljerad 3D-splat. Progressiv laddning ger omedelbar feedback.

Kontrollerna är intuitiva: dra för rotation, nyp för zoom, långtryck för reset. Inget krångel.

Passar in överallt i din stack

Som standard webkomponent funkar den med allt:

• React / Vue / Svelte – Släng in den direkt i templaten.
• Statiska sajter – Ideal för bloggar, portföljer och docs utan JS-ramverk.
• Next.js / Nuxt – Funkar med SSR och lazy loading.
• Vanliga server-renderade appar – Ren HTML, körs var som helst.

Den stora bilden

Webkomponenter växer sig starka. <image-3d> visar vägen: Avancerad 3D, ML-baserad bildhantering och realtidsgrejer blir tillgängliga med en script-tag.

Ingen lock-in. Inga ramverksberoenden. Bara ren, smart abstraktion över tung teknik.

Perfekt för e-handel, designportföljer, mäklarsajter eller bildtunga bloggar. Ett verktyg som känns självklart i efterhand.

Testa nu?

Kolla mukba.ng/image-3d/docs för full docs. Välj ett foto, klistra in två rader kod. Se dina besökare utforska innehållet i 3D.