Interaktive 3D-billeder: Webmediernes nye æra er her

Tidligere handlede billeder på hjemmesiden om en simpel <img>-tag. Det er stadig nemt. Men nu kan du tilføje avanceret interaktion uden besvær. Web components gør det muligt at bygge smarte løsninger uden tunge rammeværker eller komplicerede build-processer.

<image-3d> er et letvægts web component. Det forvandler almindelige 2D-billeder til levende 3D-oplevelser. Brugere roterer med musen, zoomer med fingre og udforsker frit. Alt sammen som en simpel drop-in løsning.

Hvorfor det ændrer spillet for dine projekter

Statiske billeder virker fint. Men i dag forventer folk mere. Produktbilder, porteføljer, ejendomsannoncer og arkitekturtegninger bliver meget stærkere med 3D-interaktion. Traditionelle 3D-værktøjer kræver dog:

• Avanceret serverbehandling
• Store klient-side biblioteker
• Højt performance-forbrug
• Dybt kendskab til WebGL eller 3D-grafik

<image-3d> fjerner alt det. Den håndterer konvertering fra 2D til 3D, mesh-opbygning og gaussian splatting. Du kan bare fokusere på dit indhold.

Kom i gang på få sekunder

Integrationen er ekstremt simpel. Bare to linjer kode.

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

Indsæt det i din HTML, og det kører. Ingen npm, ingen build, ingen config. Componentet registrerer sig selv og klar til brug.

Bruger du en IDE med AI-støtte som Claude Code? Bed AI'en om at sætte det op. Den finder billederne, tilføjer koden og viser ændringerne. Super hurtigt.

Tilpas uden besvær

Simpelhed går ikke på kompromis med fleksibilitet. Brug attributter til finjustering:

Vigtigste attributter:

• src (påtvinget) — Billede-URL'en. mukba.ng behandler det og laver mesh-preview plus detaljeret 3D-splat.
• width / height — Sæt størrelse manuelt. Fungerer med pixels, 50% eller 40vw.
• loading="lazy" — Vent med at behandle, indtil det vises på skærmen. Ideelt til sider med mange billeder.
• nobrand — Fjern watermark, hvis du hoster selv eller har licens.

Styling med CSS-variabler:

Componentet bruger shadow DOM, så dine globale styles påvirker ikke indersiden. Brug disse variabler i stedet:

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

Perfekt balanse mellem kontrol og sikkerhed. Ingen risiko for at ødelægge noget.

Events til avancerede udviklere

Vil du koble dig på livscyklussen? Componentet sender custom events:

const el = document.querySelector('image-3d');
el.addEventListener('image-3d:loading',  () => console.log('Starter...'));
el.addEventListener('image-3d:progress', (e) => console.log('Fremskridt:', e.detail));
el.addEventListener('image-3d:ready',    () => console.log('Klar til brug'));
el.addEventListener('image-3d:error',    (e) => console.warn('Fejl:', e.detail.error));

Perfekt til loading-indikatorer, analytics, genforsøg eller fejlhåndtering. Altid fallback til originalbilledet – brugere ser aldrig noget tomt.

Smidig performance bag kulisserne

Componentet loader først en let mesh-preview (~11KB) for øjeblikkelig visning. Derefter crossfader den detaljerede 3D-splat ind. Progressiv loading holder siden lynhurtig.

Betjening er intuitiv: Træk for at rotere, knib for zoom, hold for at nulstille. Ingen vejledning nødvendig.

Passer til enhver tech-stack

Som standard web component fungerer <image-3d> overalt:

• React / Vue / Svelte — Indsæt direkte i templaterne.
• Statiske sider — Fedt til blogs, porteføljer og docs uden JS-overhead.
• Next.js / Nuxt — Understøtter server-rendering og lazy loading.
• Klassiske server-apps — Ren HTML, kører på alle platforme.

Det store billede

Web components bliver voksne. Værktøjer som <image-3d> åbner for 3D-rendering, AI-billeder og real-time features via en enkelt script-tag.

Ingen lock-in, ingen afhængigheder. Kun ren, smart abstraktion over avanceret tech.

Perfekt til e-handel, designporteføljer, ejendomsider eller content-rige blogs. Et must-have i værktøjskassen.

Klar til at teste?

Tjek mukba.ng/image-3d/docs for fuld docs. Vælg et billede, tilføj to linjer kode, og se dine brugere opleve indholdet i 3D.