Interactieve 3D-foto's: De toekomst van webcontent is aangebroken

Vroeger stopte je een foto op je site met een simpele <img>-tag. Dat kan nog steeds. Maar nu breng je die beelden tot leven met interactie, zonder gedoe met ingewikkelde tools. Web components maken het mogelijk. Zo krijg je geavanceerde features zonder zware frameworks.

De <image-3d> web component verandert gewone 2D-foto's in levensechte 3D-ervaringen. Bezoekers draaien, zoomen en duiken erin. En het mooiste? Je plakt het gewoon in je code.

Waarom dit goud waard is voor jouw site

Platte afbeeldingen zijn achterhaald. Mensen willen interactie. Denk aan productfoto's, portfolio's, vastgoedfoto's of architectuurprojecten. Zulke 3D-weergave maakt alles indrukwekkender.

Meeste 3D-tools vragen om:

• Zware backend-verwerking
• Dikke libraries aan de voorkant
• Slechte prestaties
• Kennis van WebGL of 3D

<image-3d> regelt dat allemaal achter de schermen. Van 2D naar 3D, mesh-creatie tot gaussian splatting. Jij bouwt door.

Zo begin je: Echt in twee regels

Integreren is kinderwerk.

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

Geen npm, geen build, geen config. Het element meldt zich aan en doet de rest.

Werk je met een slimme IDE en Claude-integratie? Laat AI het opzetten. Geef een prompt, het voegt de code toe, kiest foto's en toont de wijzigingen. Supereenvoudig.

Aanpassen zonder kopzorgen

Simpel, maar flexibel. Gebruik attributes voor controle:

Belangrijkste opties:

• src (verplicht) — Je foto-URL. De mukba.ng-service maakt een lichte mesh en gedetailleerde 3D-splat.
• width / height — Stel afmetingen in, zoals 50% of 40vw.
• loading="lazy" — Laad pas bij scrollen in. Handig bij veel embeds.
• nobrand — Skip de branding bij eigen hosting of licentie.

Styling met CSS-variabelen:

Shadow DOM houdt alles netjes gescheiden. Geen globale CSS-rampen.

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

Perfecte mix van vrijheid en veiligheid.

Events voor pro-developers

Wil je dieper ingrijpen? Luister naar events:

const el = document.querySelector('image-3d');
el.addEventListener('image-3d:loading',  () => console.log('Bezig...'));
el.addEventListener('image-3d:progress', (e) => console.log('Voortgang:', e.detail));
el.addEventListener('image-3d:ready',    () => console.log('Klaar!'));
el.addEventListener('image-3d:error',    (e) => console.warn('Fout:', e.detail.error));

Zo voeg je loaders toe, meet je analytics, retry je of val je terug op de originele foto. Nooit een lege plek.

Slimme snelheidstrucs

Eerst laadt een kleine mesh (~11KB) voor direct resultaat. Dan fade de volle 3D-splat in. Progressief en smooth.

Bediening is logisch: sleep om te draaien, pinch om te zoomen, lang indrukken voor reset. Iedereen snapt het meteen.

Past overal in je stack

Als standaard web component werkt het met alles:

• React / Vue / Svelte — Plak in je template.
• Static sites — Ideaal voor blogs en portfolios zonder JS-frameworks.
• Next.js / Nuxt — Lazy loading volgt de viewport.
• Server-rendered apps — Puurt HTML, overal compatibel.

De grote lijn

Web components groeien hard. <image-3d> laat zien hoe 3D, AI-verwerking en meer voor iedereen bereikbaar worden. Met één script-tag.

Geen lock-in, geen afhankelijkheden. Pure, slimme tech.

Voor webshops, designportfolio's, makelaardij of blogs: probeer het. Het voelt als een open deur, maar is briljant gemaakt.

Klaar om te testen?

Duik in de docs op mukba.ng/image-3d/docs. Kies een foto, voeg twee regels toe en geef je content een 3D-twist.