3D-Modell wird nicht angezeigt — leer, schwarz oder verschwunden.
Lokal funktioniert alles, online bleibt die Fläche leer. Oder das Modell ist da, aber komplett schwarz. Oder winzig klein irgendwo in der Ecke. 3D im Browser hat ein paar typische Stolperfallen, und fast alle lassen sich in wenigen Minuten finden, wenn man weiß, wo man schauen muss.
Zuerst die Browser-Konsole öffnen. Häufigste Ursachen: Datei nicht gefunden (Pfad, Upload), falscher MIME-Typ oder CORS-Sperre vom Server, fehlender Decoder bei komprimierten Modellen. Ist die Datei geladen, aber nichts zu sehen: kein Licht oder keine Umgebung (Modell schwarz), falsche Größe oder Kamera im Modell.
Erster Blick: die Konsole.
Rechtsklick auf die Seite → Untersuchen → Konsole. Die Fehlermeldung verrät fast immer die Richtung:
| Meldung (sinngemäß) | Bedeutung |
|---|---|
| 404 beim Laden der .glb | Pfad falsch oder Datei nicht hochgeladen |
| „blocked by CORS policy“ | Datei liegt auf anderer Domain, Server erlaubt keinen Zugriff |
| „Unexpected token“ oder „Invalid typed array length“ | Statt der Datei kommt eine HTML-Seite zurück, meist eine Fehler- oder Weiterleitungsseite |
| „No DRACOLoader instance provided“ / „setMeshoptDecoder must be called“ | Komprimiertes Modell, Decoder fehlt |
| „Couldn't load texture“ | Bei .gltf mit externen Dateien: Texturen oder .bin fehlen |
| „WebGL context lost“ oder „WebGL not supported“ | Gerät, Treiber oder Browser-Einstellung |
| Keine Meldung | Datei geladen — Problem liegt bei Licht, Größe oder Kamera |
Datei lädt nicht.
Im Reiter Netzwerk nach „glb“ filtern und neu laden. Steht dort 404, stimmt der Pfad nicht. Klassiker: relative Pfade, die lokal funktionieren, aber auf Unterseiten ins Leere zeigen, oder Groß- und Kleinschreibung, die lokal egal ist, auf dem Linux-Server aber nicht. Bei .gltf-Dateien müssen außerdem die zugehörige .bin und alle Texturen im richtigen Ordner liegen. Eine .glb ist hier einfacher, weil alles in einer Datei steckt (Dateiformate).
Server: MIME-Typ und CORS.
Manche Server kennen die Endung .glb nicht und liefern sie mit falschem Typ oder gar nicht aus. Und liegt die Datei auf einer anderen Domain oder einem CDN, muss der Server ausdrücklich erlauben, dass deine Website sie laden darf — sonst blockiert der Browser. Beides lässt sich auf Apache-Servern per .htaccess lösen.
# Richtige Dateitypen für 3D-Modelle
AddType model/gltf-binary .glb
AddType model/gltf+json .gltf
# Nur nötig, wenn Modelle von einer anderen Domain geladen werden
<IfModule mod_headers.c>
<FilesMatch "\.(glb|gltf|bin|ktx2)$">
Header set Access-Control-Allow-Origin "https://deine-domain.de"
</FilesMatch>
</IfModule>Bei Nginx-Servern trägt der Hoster die Typen ein. Die CORS-Zeile nur so offen wie nötig: die eigene Domain statt eines Sternchens.
Komprimierte Modelle.
Wurde das Modell mit Draco, Meshopt oder KTX2 verkleinert, braucht der Loader den passenden Decoder. Das ist der häufigste Grund für „lokal geht es, online nicht“: Lokal lag der Decoder im Projekt, beim Hochladen wurde er vergessen oder der Pfad stimmt nicht. Wie die Einbindung aussieht, steht im Ratgeber GLB-Datei verkleinern.
Modell ist schwarz.
Moderne 3D-Modelle nutzen physikalisch basierte Materialien. Sie brauchen Licht — und vor allem eine Umgebung, die sich in Metall und Lack spiegelt. Ohne Umgebungskarte sehen metallische Oberflächen schwarz aus, obwohl alles richtig ist. Die Lösung ist eine Umgebungskarte im HDR-Format oder die in Three.js eingebaute RoomEnvironment. Weitere Ursachen: Materialfarbe in Blender auf Schwarz gesetzt, Normalen falsch herum (Innenseite sichtbar), fehlende Farbraum-Einstellung bei selbst geladenen Texturen.
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
const pmrem = new THREE.PMREMGenerator(renderer);
scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
// Farbausgabe wie in Blender
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;RoomEnvironment ist eine neutrale Studio-Umgebung ohne externe Datei. Für realistischere Spiegelungen eine eigene HDR-Datei laden.
Geladen, aber unsichtbar.
- Falsche Größe: CAD-Daten kommen oft in Millimetern, Three.js rechnet in Metern — das Modell ist tausendmal zu groß und die Kamera steckt darin. Oder umgekehrt winzig klein. Lösung: Größe des Modells messen und Kamera automatisch ausrichten.
- Modell weit weg vom Ursprung: In Blender nicht auf den Nullpunkt gesetzt, liegt es irgendwo außerhalb des Blickfelds.
- Kamera-Grenzen: Die Werte near und far der Kamera schneiden das Modell ab.
- Canvas ohne Höhe: Der Container hat per CSS die Höhe null — das Modell ist da, der Bereich nicht. Ein häufiger Fehler in Page-Buildern (3D in Elementor).
const box = new THREE.Box3().setFromObject(gltf.scene);
const size = box.getSize(new THREE.Vector3()).length();
const center = box.getCenter(new THREE.Vector3());
gltf.scene.position.sub(center); // Modell in den Ursprung
camera.near = size / 100;
camera.far = size * 100;
camera.position.set(0, size * 0.3, size * 0.9);
camera.lookAt(0, 0, 0);
camera.updateProjectionMatrix();
console.log('Modellgröße:', size.toFixed(2)); // 1000+ deutet auf Millimeter hinSpeziell in WordPress.
WordPress lässt den Upload von .glb standardmäßig nicht zu, manche Sicherheits-Plugins blockieren ihn zusätzlich. Wird die Datei trotzdem hochgeladen, liefert der Server sie manchmal mit falschem Typ aus. Optimierungs-Plugins, die JavaScript zusammenfassen oder verzögern, zerlegen außerdem gern Three.js-Module. Alle Details: GLB-Dateien in WordPress hochladen und Three.js in WordPress einbinden.
Nur auf manchen Geräten.
Funktioniert das Modell am Rechner, aber nicht auf einem bestimmten Handy, ist meist der Speicher schuld: Große Texturen sprengen den Grafikspeicher, der Browser verliert den WebGL-Kontext, und die Fläche wird leer oder grau. Kleinere Texturen und KTX2 lösen das. Bleibt die Fläche auf einem Rechner leer, ist oft die Hardwarebeschleunigung im Browser abgeschaltet. Eine Seite wie get.webgl.org zeigt, ob WebGL grundsätzlich läuft.
Wenn du Unterstützung brauchst.
Wenn das Modell trotz allem nicht erscheint, schaue ich mir die Einbindung direkt an — meist ist es eine Kleinigkeit. Einen Überblick über alle Themen gibt die Seite 3D-Webentwicklung, Preisrahmen stehen unter 3D-Konfigurator: Kosten.
Wer das schreibt.
Ich bin Manuel Killert, Web- und 3D-Entwickler aus Quakenbrück. Ich baue interaktive 3D-Anwendungen mit Three.js und Blender — Produktkonfiguratoren, Explosionsansichten, digitale Zwillinge und Scroll-Storys — und bringe sie in WordPress und WooCommerce. Die Live-Demos unten habe ich selbst gebaut, vom Blender-Modell bis zum fertigen Viewer im Browser. Die Probleme in diesem Ratgeber kenne ich deshalb nicht aus der Theorie, sondern aus eigenen Projekten.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
FAQ — 3D-Modell wird nicht angezeigt.
Warum wird mein 3D-Modell auf der Website nicht angezeigt?
Die häufigsten Ursachen sind ein falscher Pfad, ein falscher MIME-Typ oder eine CORS-Sperre des Servers und ein fehlender Decoder bei komprimierten Modellen. Die Browser-Konsole zeigt, welcher Fall vorliegt.
Warum ist mein GLB-Modell schwarz?
Physikalisch basierte Materialien brauchen Licht und eine Umgebungskarte. Ohne Umgebung erscheinen metallische Flächen schwarz. Eine HDR-Umgebung oder die RoomEnvironment von Three.js behebt das.
Welchen MIME-Typ braucht eine GLB-Datei?
model/gltf-binary für .glb und model/gltf+json für .gltf. Auf Apache-Servern lässt sich das per AddType in der .htaccess eintragen.
Warum funktioniert das Modell lokal, aber nicht online?
Oft fehlt online der Draco- oder Meshopt-Decoder, der Pfad stimmt wegen Groß- und Kleinschreibung nicht, oder der Server liefert die Datei mit falschem Typ aus.
Das Modell lädt, ist aber nicht zu sehen. Warum?
Meist stimmt die Größe nicht, etwa weil CAD-Daten in Millimetern kommen, oder das Modell liegt außerhalb des Blickfelds. Eine automatische Ausrichtung der Kamera anhand der Modellgröße löst das.
Warum bleibt das Modell auf manchen Handys leer?
Große Texturen überschreiten den Grafikspeicher und der Browser verliert den WebGL-Kontext. Kleinere oder KTX2-komprimierte Texturen helfen.
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