Interaktive 3D-Fotos: Die Web-Medien der Zukunft sind da

Früher hast du ein Bild einfach mit einem <img>-Tag eingefügt. Das geht immer noch. Aber heute machst du daraus echte Erlebnisse – ohne komplizierte Tools. Web Components machen's möglich: Du baust Interaktion ein, ohne schwere Frameworks oder endlose Builds.

Das <image-3d>-Element ist so ein Highlight. Es wandelt normale Fotos in 3D-Modelle um. Nutzer drehen per Drag, zoomen mit Pinch und tauchen ein. Und das alles als simpler Drop-in.

Warum das für deine Projekte zählt

Normale Bilder wirken heute öde. User wollen mehr Action. Perfekt für Produktfotos, Portfolios, Immobilienportale oder Architekturpläne. Bisher brauchtest du dafür:

• Aufwändige Server-Verarbeitung
• Dicke JavaScript-Bibliotheken
• Hohe Ladezeiten
• WebGL-Kenntnisse

<image-3d> übernimmt das alles. Es erzeugt Meshes, Gaussian Splats und mehr. Du kümmerst dich um den Rest.

So startest du – in zwei Zeilen

Einfacher geht's nicht:

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

Kein npm, kein Build, keine Config. Das Element meldet sich selbst an und rockt.

In modernen IDEs mit AI-Support? Lass Claude Code den Code basteln. Beschreib's kurz – es fügt alles ein, zeigt Diffs und ist ready.

Anpassen, ohne Chaos

Einfach, aber flexibel. Mit Attributen steuerst du's:

Wichtige Attribute:

• src (Pflicht) – Dein Bild-Link. Der mukba.ng-Service macht daraus Mesh und 3D-Splat.
• width / height – Setz Größen in Pixeln, Prozent oder vw.
• loading="lazy" – Lädt erst beim Scrollen. Ideal bei vielen Bildern.
• nobrand – Ohne Branding, wenn du selbst hostest.

CSS-Variablen für Style:

Shadow DOM schützt vor Kollisionen. Nutz das:

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

Perfekter Mix aus Freiheit und Sicherheit.

Events für Profis

Willst du tiefer einsteigen? Das Element feuert Events:

const el = document.querySelector('image-3d');
el.addEventListener('image-3d:loading',  () => console.log('Lädt...'));
el.addEventListener('image-3d:progress', (e) => console.log('Fortschritt:', e.detail));
el.addEventListener('image-3d:ready',    () => console.log('Bereit!'));
el.addEventListener('image-3d:error',    (e) => console.warn('Fehler:', e.detail.error));

Zeig Loader, tracke Stats oder baue Retries. Fallback? Immer das Originalbild – nie ein Breaker.

Performance, die überzeugt

Clever gemacht: Erst das leichte Mesh (~11KB) für schnellen Start. Dann crossfaded der detaillierte Splat rein. User sehen sofort was.

Bedienung intuitiv: Ziehen zum Drehen, Pinch zum Zoomen, langes Drücken resetet. Kein Lernaufwand.

Passt zu jedem Stack

Als Standard-Web-Component funktioniert's überall:

• React / Vue / Svelte – Direkt in Templates droppen.
• Statische Sites – Top für Blogs oder Docs ohne JS-Drama.
• Next.js / Nuxt – SSR-freundlich, lazy per Viewport.
• Klassische Server-Apps – Reines HTML, läuft überall.

Der große Trend

Web Components reifen rasant. <image-3d> zeigt: 3D, ML-Processing oder Kollaboration? Bald per Script-Tag für alle.

Kein Lock-in, kein Framework-Zwang. Reine, smarte Tech.

Für Shops, Portfolios, Immobilien oder Blogs: Das muss rein. Es fühlt sich nach "war ja klar" an – aber clever gebaut.

Ausprobieren?

Schau bei mukba.ng/image-3d/docs. Nimm ein Foto, zwei Zeilen Code – und deine Inhalte leben in 3D.