FensterLex
3D Modell-Viewer
Three.js-basierter GLB-Viewer mit HDRI-Beleuchtung, Explosionsansicht, Drehpunkt-Steuerung und Draco-Unterstützung.
Übersicht
Der Viewer läuft vollständig im Browser — keine Installation, keine Plugins. Unterstützt alle aktuellen Desktop- und Mobile-Browser.
Steuerung
Maus / Trackpad
| Aktion | Eingabe |
|---|---|
| Drehen | Linke Maustaste gedrückt + ziehen |
| Zoomen | Scrollrad |
| Verschieben (Pan) | Rechte Maustaste + ziehen |
| Drehpunkt setzen | Doppelklick auf Modell |
Touch (Mobile)
| Aktion | Eingabe |
|---|---|
| Drehen | 1 Finger ziehen |
| Zoomen | 2 Finger Pinch |
| Verschieben | 2 Finger ziehen |
| Drehpunkt setzen | Doppeltippen auf Modell |
Tastatur
| Aktion | Taste |
|---|---|
| Pivot-Modus abbrechen | ESC |
Das Scrollrad zoomt nur wenn die Maus über dem Canvas ist — in der Seitenleiste ist der Zoom deaktiviert damit Dropdowns und Slider ohne ungewolltes Zoomen bedienbar sind.
Seitenleiste
Die Seitenleiste ist in klappbare Sektionen unterteilt. Jede Sektion lässt sich per Klick auf den Titel öffnen und schließen. Bei vielen geöffneten Sektionen scrollt die Sidebar unabhängig vom Canvas.
HDRI & Beleuchtung
HDRI laden
Es gibt drei Wege:
Dateien aus dem konfigurierten hdriPath-Verzeichnis werden beim Start automatisch aufgelistet. Auswahl lädt die HDRI sofort.
Beliebige .hdr- oder .exr-Datei vom lokalen Rechner. Funktioniert auch auf Mobile.
Die erste Datei in hdriFiles wird beim Laden des Viewers automatisch geladen — kein schwarzes Modell beim ersten Öffnen.
Formate
| Format | Empfehlung | Dateigröße |
|---|---|---|
| .hdr (Radiance) | Standard für Web — schnell, kompakt | 8–15 MB (2K) |
| .exr (OpenEXR) | Verlustfrei, höherer Dynamikumfang | 20–80 MB |
Für reine Beleuchtung reichen 2K (2048×1024) vollständig. 4K lohnt nur wenn die HDRI als sichtbarer Hintergrund gezeigt wird oder bei sehr glänzenden Metalloberflächen mit scharfen Reflektionen.
HDRI als Hintergrund
Der Button „HDRI als BG" zeigt das Panorama als Szenen-Hintergrund. Lässt sich jederzeit umschalten — der Viewer merkt sich die geladene Textur.
Modell laden
Empfohlener Workflow
Revit → Blender → GLB-Export. Vor dem Export in Blender:
Sieht mit HDRI-Beleuchtung deutlich besser aus als generische Materialien.
Verhindert komische Skalierungen und Rotationen beim Laden.
Für die Explosionsansicht müssen Bauteile als separate Objekte exportiert werden — nicht zu einem Mesh zusammenführen.
Draco-Kompression
Der Viewer erkennt Draco-komprimierte GLB-Dateien automatisch. Der Decoder wird vom Google-CDN geladen. Kein manueller Eingriff nötig.
Autoload beim Start Config
Ein Modell kann automatisch beim Öffnen geladen werden — einfach in der CFG eintragen:
glbAutoLoad: '../assets/models/fenster.glb',
glbHdriPath: '../assets/hdri/studio.hdr', // optional
Explosionsansicht
Der Slider „Explosionsfaktor" (0–3) fährt alle Bauteile vom gemeinsamen Modell-Mittelpunkt nach außen. Die Animation ist geglättet (Lerp) — kein Rucken.
Das Modell muss aus einzelnen Mesh-Objekten bestehen. In Blender: Bauteile nicht joinen vor dem GLB-Export. Die Anzahl erkannter Bauteile wird im Viewer angezeigt.
Automatische Ebenen-Erkennung
Der Viewer sucht automatisch die beste Hierarchie-Ebene. Zuerst werden direkte Kinder geprüft, falls nur eines vorhanden ist eine Ebene tiefer. Bauteile die exakt im Modell-Mittelpunkt liegen bekommen eine leicht zufällige Richtung damit sie sich nicht überlagern.
Zurücksetzen
Slider auf 0 ziehen oder Button „↺ Zusammenbauen" — das Modell fährt sanft in die Ausgangsposition zurück.
Drehpunkt
Standardmäßig dreht sich die Kamera um den Ursprung (0, 0, 0). Bei Modellen die versetzt liegen kann ein eigener Drehpunkt gesetzt werden.
Ein Hinweis-Banner erscheint oben im Canvas.
Ein Amber-Kreis markiert den neuen Drehpunkt kurz. Die Kamera-Rotation dreht sich ab sofort um diesen Punkt.
„↺ Drehpunkt Reset" setzt den Orbit-Mittelpunkt auf (0, 0, 0) zurück.
Doppeltippen auf das Modell setzt den Drehpunkt direkt — ohne vorher den Button zu drücken.
Konfiguration
Alle einstellbaren Parameter befinden sich im CFG-Objekt ganz oben im <script>-Block der HTML-Datei.
glbAutoLoad: '', // Leer = Demo-Modell
glbHdriPath: '', // Leer = hdriFiles[0] wird verwendet
// ── HDRI-Bibliothek ──────────────────────────
hdriPath: '../assets/hdri/', // Ordner-Pfad
hdriFiles: [
'standard.hdr', // ← wird beim Start automatisch geladen
'studio.hdr',
'outdoor.exr', // .exr ebenfalls unterstützt
],
Die erste Datei wird beim Start automatisch geladen. Dateinamen alphabetisch oder nach Priorität sortieren — die Reihenfolge bestimmt auch die Dropdown-Reihenfolge.
Ordnerstruktur
├── tools/
│ └── fensterlex_3d_viewer.html ← Viewer hier
├── assets/
│ ├── hdri/ ← .hdr und .exr Dateien
│ └── models/ ← .glb Dateien
└── index.html
Da der Viewer im Unterordner tools/ liegt, müssen alle Pfade mit ../ beginnen.
Tipps & Hinweise
HDRI wird nicht angezeigt
Häufigste Ursache: Pfad falsch (fehlender ../). Browser-Konsole (F12) zeigt den genauen Fehler. Lokal immer über einen Webserver aufrufen:
python -m http.server 8080
# Dann: http://localhost:8080/tools/fensterlex_3d_viewer.html
Explosionsansicht zeigt „1 Bauteil"
Die GLB-Datei enthält nur ein einziges Mesh. In Blender vor dem Export sicherstellen dass Bauteile als separate Objekte existieren und nicht mit Strg+J gejoined wurden.
Modell liegt nicht im Mittelpunkt
Drehpunkt per Doppelklick auf das Modell neu setzen. Alternativ in Blender vor dem Export Object → Set Origin → Origin to Geometry ausführen und anschließend das Objekt auf den Ursprung setzen.
Performance auf Mobile
Draco-Kompression in Blender aktivieren. Texturen auf max. 1K–2K begrenzen.
Mobile-GPUs haben begrenzten Speicher. 4K-HDRIs können auf älteren Geräten zu Abstürzen führen.
Spart Akku und CPU, wenn das Modell nur betrachtet werden soll.