Blender-to-Web Pipeline mit Three.js

3D im Web ist kein Experiment mehr. Aber der Weg von Blender zum Browser hat Tücken, die man kennen muss.

Der Export: glTF ist Standard

Blender exportiert nativ als glTF 2.0 (.glb). Das Format ist kompakt, GPU-optimiert und wird von Three.js direkt geladen. Vergiss OBJ und FBX für Web-Projekte. glTF bringt Materialien, Animationen und Licht-Setup in einer Datei.

Optimierung vor dem Export

In Blender: Decimate-Modifier auf alles über 10.000 Faces. Texturen als JPEG/WebP in 1024x1024 statt 4K. Lightmaps baken statt Echtzeit-Schatten. Ein typisches Web-Modell sollte unter 2 MB bleiben.

Three.js Setup

import { useGLTF } from '@react-three/drei';

function Model() {
  const { scene } = useGLTF('/model.glb');
  return <primitive object={scene} />;
}

React Three Fiber macht die Integration in React-Projekte einfach. Drei Zeilen Code für ein vollständiges 3D-Modell mit Materialien.

Draco Compression

Google Draco komprimiert Geometrie um 80-90%. Der glTF-Exporter in Blender unterstützt es nativ. Zusammen mit gzip auf dem Server schrumpft ein 5 MB Modell auf unter 500 KB.

Performance-Grenzen respektieren

Mobilgeräte haben GPU-Limits. Maximal 100.000 Triangles für ein einzelnes Modell, besser unter 50.000. Kein Post-Processing auf Low-End-Geräten. Und immer einen Fallback für Geräte ohne WebGL.

Die Pipeline funktioniert. Die Herausforderung liegt im Optimieren, nicht im Exportieren.