3D-Modell auf der Website einbinden.
Vom Einzeiler bis zur eigenen Szene: Hier sind drei Wege, ein 3D-Modell auf deine Website zu bringen — mit Code zum Kopieren, dem richtigen Dateiformat und den Fehlern, die fast jeder beim ersten Mal macht.
Für ein einzelnes Modell zum Drehen reicht Googles model-viewer mit zwei Zeilen Code. Sobald du eigene Interaktion, mehrere Objekte oder Animationen brauchst, führt der Weg zu Three.js. Das Modell sollte in beiden Fällen im Format GLB vorliegen und vorher komprimiert werden.
Schritt 1: Das richtige Format.
Für das Web gibt es praktisch nur eine sinnvolle Wahl: glTF, in der binären Variante GLB. Es ist das „JPEG für 3D“ — ein offener Standard, der Geometrie, Materialien, Texturen und Animationen in einer Datei bündelt und von allen gängigen Bibliotheken unterstützt wird.
Liegen deine Daten als OBJ, FBX, STEP oder in einem CAD-Format vor, lassen sie sich mit Blender (kostenlos) nach GLB exportieren. CAD-Formate wie STEP brauchen meist einen Zwischenschritt über ein Konvertierungswerkzeug.
Vorher komprimieren
Ein unbehandeltes Modell ist oft 20 bis 100 MB groß — viel zu viel für eine Website. Das Kommandozeilen-Werkzeug gltf-transform reduziert die Größe typischerweise auf einen Bruchteil, ohne sichtbaren Qualitätsverlust:
# einmalig installieren
npm install --global @gltf-transform/cli
# Geometrie mit Draco komprimieren, Texturen auf WebP umstellen
gltf-transform optimize modell.glb modell-web.glb \
--compress draco \
--texture-compress webpDanach die Dateigröße vergleichen. Ist sie immer noch über ca. 5 MB, sind meist die Texturen zu groß.
Weg 1: model-viewer — der Einzeiler.
Google stellt mit model-viewer eine fertige Web-Komponente bereit. Drehen, Zoomen, Ladeanzeige und sogar AR auf dem Smartphone sind eingebaut. Ideal für einen Produkt-Viewer auf einer einzelnen Produktseite.
<!-- einmal im <head> -->
<script type="module"
src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
<!-- dort, wo das Modell erscheinen soll -->
<model-viewer
src="/modelle/modell-web.glb"
alt="Beschreibung des Produkts"
camera-controls
auto-rotate
shadow-intensity="1"
loading="lazy"
style="width:100%;height:480px;">
</model-viewer>Das alt-Attribut nicht vergessen — es ist das, was Suchmaschinen und Screenreader vom Modell sehen. Die Bibliothek wird von Google-Servern geladen; wer das vermeiden will, legt die Datei selbst auf den Server.
Weg 2: Three.js — volle Kontrolle.
Wenn das Modell auf Klicks reagieren, Teile auseinanderfahren oder Farben wechseln soll, brauchst du eine eigene Szene. Das Grundgerüst ist überschaubar:
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const box = document.getElementById('szene');
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(box.clientWidth, box.clientHeight);
box.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, box.clientWidth / box.clientHeight, 0.1, 100);
camera.position.set(0, 1, 4);
scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 2));
new GLTFLoader().load('/modelle/modell-web.glb', (gltf) => {
scene.add(gltf.scene);
});
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
renderer.setAnimationLoop(() => {
controls.update();
renderer.render(scene, camera);
});Wurde das Modell mit Draco komprimiert, braucht der GLTFLoader zusätzlich einen DRACOLoader. Sonst bleibt die Szene leer, ohne Fehlermeldung — einer der häufigsten Stolpersteine.
Weg 3: Einbetten per iframe.
Liegt die 3D-Anwendung bereits fertig auf einem eigenen Server — etwa ein Konfigurator —, kann sie per iframe in jede Seite eingebettet werden. Vorteil: Die Website bleibt technisch unberührt. Nachteil: Die Inhalte im iframe zählen für Google nicht zur Seite, deshalb gehört drumherum echter Text.
Die fünf häufigsten Fehler.
- Modell ist schwarz: Kein Licht in der Szene. Eine HemisphereLight oder eine Umgebungs-Map hinzufügen.
- Modell ist unsichtbar: Falscher Maßstab oder die Kamera steht im Modell. Größe mit einer Bounding Box prüfen.
- Szene bleibt leer: Draco-komprimiert, aber kein DRACOLoader eingebunden.
- Seite lädt ewig: Modell nicht komprimiert oder 4K-Texturen. Mit gltf-transform nacharbeiten.
- Unscharf auf dem Handy: setPixelRatio vergessen. Aber nicht über 2 gehen, sonst wird es langsam.
Ein einzelnes Modell mit model-viewer bekommst du mit dieser Anleitung selbst hin. Sobald Interaktion, Preislogik, mehrere Varianten oder die Anbindung an einen Shop dazukommen, wird es Entwicklerarbeit.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
Wie groß darf die Datei sein?
Die häufigste Enttäuschung bei 3D im Web ist nicht die Technik, sondern die Ladezeit. Ein Modell direkt aus Blender oder aus dem CAD-System wiegt schnell 50 Megabyte und mehr — auf dem Handy im Mobilfunknetz wartet darauf niemand. Als Richtwert gilt: eine Produktansicht sollte zwischen einem und drei Megabyte liegen, ein Hero-Element im Kopfbereich noch darunter. Das ist fast immer erreichbar, weil das meiste Gewicht in den Texturen steckt und nicht in der Geometrie. Texturen auf 1024 oder 2048 Pixel begrenzen, als WebP oder KTX2 speichern und die Geometrie mit Draco oder Meshopt komprimieren — damit schrumpfen Modelle regelmäßig auf einen Bruchteil, ohne dass ein Besucher einen Unterschied sieht. Die Schritte im Einzelnen stehen unter GLB-Datei verkleinern.
Wichtig dabei: Ein komprimiertes Modell braucht den passenden Decoder im Browser. Fehlt er, bleibt die Fläche leer, obwohl die Datei geladen wurde. Genau das ist einer der häufigsten Stolpersteine beim Einbinden.
Wenn nichts zu sehen ist.
Lokal funktioniert alles, online bleibt die Fläche leer oder das Modell erscheint komplett schwarz — dafür gibt es eine überschaubare Zahl typischer Ursachen. Die Browser-Konsole zeigt meist sofort, welche davon vorliegt: eine 404-Meldung deutet auf einen falschen Pfad oder eine fehlende Datei, eine CORS-Meldung auf einen Server, der die Datei von einer anderen Domain nicht freigibt, ein Hinweis auf eine fehlende Erweiterung auf den nicht eingebundenen Decoder. Ist das Modell schwarz, fehlt fast immer eine Umgebungskarte: Physikalisch basierte Materialien brauchen etwas, das sich in Metall und Lack spiegeln kann. Und wenn das Modell geladen ist, aber nicht sichtbar, stimmt häufig die Größe nicht, weil CAD-Daten in Millimetern kommen und Three.js in Metern rechnet. Die vollständige Prüfreihenfolge steht unter 3D-Modell wird nicht angezeigt.
Was nach dem Einbinden kommt.
Ein drehbares Modell ist der Anfang. Richtig nützlich wird es, wenn es etwas erklärt: Hotspots benennen Bauteile und Materialien, eine Explosionsansicht zeigt den inneren Aufbau, ein Konfigurator lässt Varianten durchspielen. Für Shops lohnt der Blick auf die WooCommerce-Produktansicht. Und damit niemand ausgeschlossen bleibt, gehören Tastaturbedienung und eine Textalternative dazu (3D barrierefrei).
FAQ — 3D-Modell auf Website einbinden.
Welches Dateiformat brauche ich für 3D auf einer Website?
GLB, die binäre Variante von glTF. Es bündelt Geometrie, Materialien, Texturen und Animationen in einer Datei und wird von allen gängigen Web-Bibliotheken unterstützt. Andere Formate wie OBJ, FBX oder STEP lassen sich mit Blender oder Konvertierungswerkzeugen nach GLB umwandeln.
Wie groß darf ein 3D-Modell für eine Website sein?
Als grobe Richtwerte gelten unter 5 MB für Produkt-Viewer und selten mehr als 10 bis 15 MB für komplexe Szenen. Entscheidend ist aber, dass das Modell vorher komprimiert wird, etwa mit Draco für die Geometrie und WebP oder KTX2 für die Texturen.
Geht das auch mit WordPress?
Ja. Für einfache Fälle gibt es Plugins, die model-viewer einbinden. Für eigene Szenen wird der Code als Modul oder in einem eigenen Block eingebunden. Wichtig ist, dass das Skript nur auf den Seiten geladen wird, die das Modell tatsächlich zeigen.
Warum ist mein 3D-Modell schwarz?
Meist fehlt Licht in der Szene. Materialien, die auf Licht reagieren, erscheinen ohne Lichtquelle schwarz. Eine HemisphereLight oder eine Umgebungs-Map löst das in den meisten Fällen.
Funktioniert das auch auf dem Smartphone?
Ja, wenn das Modell komprimiert ist und die Pixeldichte begrenzt wird. model-viewer bietet auf vielen Smartphones zusätzlich eine AR-Ansicht, bei der das Modell in den echten Raum projiziert wird.
Das bin ich – rechts im BildErzähl mir, was du zeigen willst.
Ich sage dir ehrlich, ob sich 3D für dein Vorhaben lohnt — und wenn nicht, was stattdessen mehr bringt.
Antwort meist innerhalb von 24 Stunden · hallo@manuelkillert.de