Blender-Modell fürs Web exportieren.
In Blender sieht alles perfekt aus — im Browser ist das Modell grau, riesig oder die Hälfte fehlt. Hier sind Vorbereitung, Exporteinstellungen und Nachbearbeitung, die funktionieren, sortiert in der Reihenfolge, in der du sie brauchst.
Exportiere über Datei → Exportieren → glTF 2.0 als glTF Binary (.glb), mit angewendeten Modifikatoren und „+Y oben“. Wichtiger als die Einstellungen ist die Vorbereitung: Materialien auf Principled BSDF, prozedurale Texturen in Bilder backen, Transformationen anwenden, Maßstab in Metern. Danach mit gltf-transform komprimieren.
Warum Blender-Modelle im Browser anders aussehen.
Blender rendert mit Eevee oder Cycles — Renderer, die sehr viel können: komplexe Knotenbäume, Volumen, prozedurale Texturen, aufwendige Lichtberechnung. Der Browser dagegen muss dieselbe Szene 60-mal pro Sekunde auf einem Smartphone zeichnen. Das Format dazwischen, glTF, beschreibt deshalb nur, was sich in Echtzeit darstellen lässt: Geometrie, physikalisch basierte Materialien, Texturen, Animationen.
Alles, was darüber hinausgeht, fällt beim Export weg. Die Aufgabe ist also nicht, „richtig zu exportieren“, sondern das Modell vorher so vorzubereiten, dass nichts Wichtiges wegfällt.
Vorbereitung in fünf Schritten.
- Transformationen anwenden: Objekt auswählen, Strg + A → Alle Transformationen. Sonst kommt es verzerrt oder falsch gedreht an.
- Maßstab prüfen: Blender arbeitet in Metern, genau das erwarten Three.js und AR. CAD-Importe in Millimetern sind tausendfach zu groß.
- Ursprung setzen: Für Produkte an die Unterseite in die Mitte, damit sie auf dem Boden stehen und sich um ihre Mitte drehen.
- Materialien vereinfachen: Jedes Material auf Principled BSDF mit Grundfarbe, Metallic, Roughness, Normal-Map, optional Emission und Transparenz.
- Aufräumen: Hilfsobjekte, unsichtbare Innenteile, Arbeitskameras und -lichter entfernen; ungenutzte Daten mit Datei → Aufräumen löschen.
Zusätzlich lohnt ein Blick auf die Polygonzahl. Ein Subdivision-Modifikator mit Stufe 3 sieht in Blender weich aus und erzeugt beim Export ein Vielfaches der Geometrie. Oft genügt Stufe 1 plus Normal-Map.
Texturen backen.
Prozedurale Texturen — Noise, Voronoi, Farbrampen — gibt es in glTF nicht. Damit das Aussehen erhalten bleibt, wird es in Bilddateien „gebacken“:
- Modell braucht eine saubere UV-Abwicklung, zum Beispiel über Smart UV Project.
- Im Material eine Bildtextur-Node mit einem neuen, leeren Bild anlegen (1024 oder 2048 Pixel) und auswählen, aber nicht verbinden.
- Renderer auf Cycles stellen, im Render-Tab unter Backen den Typ wählen — „Diffuse“ nur mit Farbe für die Grundfarbe, „Roughness“ und „Normal“ für die übrigen Kanäle.
- Backen, Bild speichern.
- Die gebackenen Bilder mit dem Principled BSDF verbinden und die prozeduralen Nodes entfernen.
Mit demselben Verfahren lässt sich auch Licht und Schatten in eine Textur backen. Das sieht im Browser deutlich hochwertiger aus als Echtzeitschatten und entlastet schwache Geräte.
Die Exporteinstellungen.
Format ............ glTF Binary (.glb)
Einschließen
Begrenzen auf ... Ausgewählte Objekte (nur, was ins Web soll)
Kameras/Lichter . aus (Szene wird im Code gesetzt)
Transformation
+Y ist oben ..... an
Daten → Mesh
Modifikatoren anwenden ... an
UVs, Normalen ............ an
Tangenten ................ an, wenn Normal-Maps genutzt werden
Daten → Material
Materialien ..... Exportieren
Bilder .......... Automatisch (oder WebP für kleinere Dateien)
Kompression
Draco ........... aus — lieber im Nachgang mit gltf-transform
Animation
nur aktivieren, wenn das Modell Animationen hatBezeichnungen können je nach Blender-Version leicht abweichen. Die unkomprimierte GLB bleibt als Arbeitsstand erhalten; komprimiert wird eine Kopie.
Nach dem Export: prüfen und komprimieren.
Bevor die Datei in die Website kommt, zwei Schritte: Erst in einem glTF-Viewer im Browser öffnen und prüfen, ob Materialien, Maßstab und Ausrichtung stimmen. Dann verkleinern.
npm install --global @gltf-transform/cli
# Was steckt drin? Meshes, Materialien, Texturgrößen
gltf-transform inspect modell.glb
# Texturen auf max. 2048 px und WebP
gltf-transform resize modell.glb tmp1.glb --width 2048 --height 2048
gltf-transform webp tmp1.glb tmp2.glb
# Aufräumen und Geometrie komprimieren
gltf-transform dedup tmp2.glb tmp3.glb
gltf-transform prune tmp3.glb tmp4.glb
gltf-transform draco tmp4.glb modell-web.glbWird Draco verwendet, braucht Three.js einen DRACOLoader, sonst bleibt die Szene leer. Als Faustregel sollte ein Produktmodell danach möglichst unter 3–5 MB liegen.
Die häufigsten Fehler.
| Symptom | Ursache | Lösung |
|---|---|---|
| Modell ist grau | Knoten, die glTF nicht kennt | Texturen backen, Principled BSDF |
| Modell riesig oder winzig | Einheiten falsch, Skalierung nicht angewendet | Maßstab prüfen, Strg + A |
| Teile fehlen | Modifikatoren nicht angewendet, Objekte nicht ausgewählt | Exportoptionen prüfen |
| Flächen schwarz oder durchsichtig | Normalen zeigen nach innen | Normalen neu berechnen (Umschalt + N) |
| Normal-Map wirkt falsch | Tangenten fehlen oder Farbraum falsch | Tangenten exportieren, Bild als Non-Color |
| Transparenz fehlt oder flackert | Alpha-Modus nicht gesetzt | Blend-Modus im Material einstellen |
| Datei 200 MB groß | 8K-Texturen, hohe Subdivision | Texturen verkleinern, Subdivision senken |
| Modell steht schief oder schwebt | Ursprung nicht am Boden | Ursprung setzen |
Modelle per Skript erzeugen.
Viele meiner Modelle entstehen per Python-Skript direkt in Blender — etwa die Bausätze für die Showcases. Das hat für Web-Projekte handfeste Vorteile: Materialien werden von Anfang an glTF-tauglich angelegt, Namen sind konsistent (wichtig, wenn Three.js später einzelne Teile ansprechen soll), und bei Änderungen wird das ganze Modell neu erzeugt statt von Hand korrigiert.
Für Konfiguratoren geht man oft noch einen Schritt weiter und berechnet das Modell gar nicht mehr in Blender, sondern direkt im Browser. Blender liefert dann nur noch Einzelteile, Materialien und Referenzen. Wie die fertige Datei in die Website kommt, zeigt 3D-Modell auf Website einbinden, für WordPress GLB-Dateien hochladen.
Die gezeigten Demos stammen aus meiner eigenen Arbeit. Die Markennamen sind überwiegend erfundene Showcases — die Technik ist echt und läuft live im Browser.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
FAQ — Blender-Modell fürs Web exportieren.
Wie exportiere ich ein Blender-Modell für Three.js?
Über Datei, Exportieren, glTF 2.0 im Format glTF Binary als GLB-Datei, mit angewendeten Modifikatoren und der Einstellung +Y ist oben. Vorher sollten Transformationen angewendet, der Maßstab in Metern geprüft, der Ursprung gesetzt und Materialien auf den Principled BSDF umgestellt werden.
Warum ist mein Blender-Modell im Browser grau?
Weil glTF nur den Principled BSDF mit Grundfarbe, Metallic, Roughness, Normal-Map, Emission und Transparenz versteht. Prozedurale Texturen, Farbrampen und komplexe Knotenbäume werden beim Export ignoriert. Die Lösung ist, das Aussehen vorher in Bilddateien zu backen.
GLB oder glTF — was soll ich exportieren?
Für das Web in fast allen Fällen GLB. Es bündelt Geometrie, Materialien und Texturen in einer einzigen Datei. glTF mit getrennten Dateien ist nur praktisch, wenn Texturen nachträglich einzeln bearbeitet werden sollen.
Wie backe ich Texturen in Blender?
Das Modell braucht eine UV-Abwicklung. Im Material wird eine Bildtextur-Node mit leerem Bild angelegt und ausgewählt, dann im Render-Tab mit Cycles unter Backen der gewünschte Typ gebacken, etwa Diffuse nur mit Farbe. Das gespeicherte Bild wird anschließend mit dem Principled BSDF verbunden.
Soll ich Draco schon in Blender aktivieren?
Das ist möglich, sinnvoller ist aber meist, die unkomprimierte Datei als Arbeitsstand zu behalten und die Kompression im Nachgang mit gltf-transform anzuwenden. Wird Draco genutzt, braucht Three.js zusätzlich einen DRACOLoader.
Warum sind Teile meines Modells im Browser unsichtbar?
Häufige Ursachen sind nach innen zeigende Normalen, nicht angewendete Modifikatoren oder Objekte, die beim Export nicht ausgewählt waren. Normalen lassen sich im Bearbeitungsmodus neu berechnen.
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