06 / WebGL-Tool · Eigenes Projekt
Viewport
Modell öffnen. Prüfen. Lokal behalten.
Ein glTF-2.0-Viewer zum Prüfen von Modellen, Materialien und Beleuchtung im Browser. Lokale GLB- oder eigenständige glTF-Dateien öffnen, das Modell drehen und das Rendering anpassen — ohne Datei-Upload.
- Meine Rolle
- Viewer-Architektur, 3D-Rendering & Oberflächenentwicklung
- Technologien
- Next.js / React / TypeScript / Three.js / React Three Fiber / Drei
Das Problem
Für die Prüfung eines 3D-Exports sollten weder ein Desktop-Editor noch ein Server-Upload nötig sein. Ein hilfreicher Browser-Viewer muss auch ungeeignete Dateien erklären und bei Lade- oder Rendering-Fehlern bedienbar bleiben.
Meine Umsetzung
Ich entwickelte eine React- und TypeScript-Oberfläche für eine React-Three-Fiber-Szene. Lokale Dateien werden über Browser-Objekt-URLs geladen; Kameraanpassung, Orbit-Steuerung, Animationswiedergabe und Licht-Presets erleichtern die Modellprüfung.
Die Herausforderung
Modelle unterscheiden sich in Größe, Materialien und Dateistruktur. Ungültige Exporte, fehlende externe Texturen und ein verlorener WebGL-Kontext brauchen verständliches Feedback statt einer unerklärlich leeren Ansicht.
Technischer Ansatz
Ich prüfe GLB-Header und Größenlimits vor dem Laden und lehne JSON-glTF-Dateien mit externen Ressourcen ab. Getrennte Fehlergrenzen für Modell und Umgebung isolieren Fehler; die Kontextüberwachung unterstützt die Wiederherstellung. Draco-Decoder werden lokal bereitgestellt; nicht mehr benötigte Objekt-URLs und geklonte Materialien werden freigegeben.
Workflow-Übersicht
Modell öffnen. Prüfen. Lokal behalten.
- 01Datei wählen & prüfen
- 02Dekodieren & Kamera anpassen
- 03Materialien & Licht prüfen
- 04Wiederherstellen & Ressourcen freigeben
Vereinfachte Darstellung des Produktablaufs.
Das Ergebnis