3D Model Viewer: glTF & GLB online

Was ist der glTF/GLB 3D Model Viewer?

Der glTF/GLB 3D Model Viewer lässt Sie .gltf- und .glb-3D-Modelldateien direkt im Browser öffnen und prüfen — ohne Softwareinstallation, ohne Konto und ohne Datei-Upload auf einen Server. Ziehen Sie ein Modell in den Viewer und umkreisen, zoomen und schwenken Sie es sofort mit der Maus. Das Tool basiert auf Googles model-viewer-Webkomponente — demselben produktionsreifen Renderer, der in Googles 3D-Produktvorschauen und AR Quick Look eingesetzt wird. Sie können zwischen fünf Umgebungslicht-Presets wählen, Belichtung und Schattenintensität anpassen, die Auto-Rotation ein- und ausschalten und einen Screenshot der aktuellen Ansicht exportieren.

Hauptfunktionen

• Drag & Drop für glTF und GLB — Ziehen Sie eine .gltf- oder .glb-Datei in den Drop-Bereich; nicht passende Erweiterungen zeigen eine Fehlermeldung, bevor das Laden beginnt
• Orbit-, Zoom- und Schwenk-Steuerung — Linksklick + Ziehen zum Umkreisen, Scrollrad zum Zoomen, Rechtsklick + Ziehen zum Schwenken; camera-controls ist am <model-viewer>-Element aktiviert
• Auto-Rotation umschalten — Ein Switch aktiviert oder deaktiviert das auto-rotate-Attribut der <model-viewer>-Komponente; standardmäßig eingeschaltet
• Fünf Umgebungslicht-Presets — Neutral, Warm, Legacy, Commerce, Spruit Sunrise; entspricht direkt dem environment-image-Attribut
• Belichtungsregler — Schieberegler von 0,1 bis 3,0 (Schritt 0,1); Standardwert 1,0
• Schattenintensitätsregler — Schieberegler von 0,0 bis 2,0 (Schritt 0,1); Standardwert 1,0; entspricht dem shadow-intensity-Attribut
• Screenshot-Export — ruft modelViewer.toBlob() auf und speichert als {Modellname}_{Seitenverhältnis}_{Licht}_{Auflösung}.png
• Seitenverhältnis-Presets — wählen Sie aus Frei, 1:1, 4:3, 16:9, 9:16, 3:2 und 21:9 für den Viewer
• Mehrere Upload-Methoden — einzelne .gltf/.glb-Datei, ZIP-Archiv mit glTF-Bundle oder gesamten Ordner hochladen
• Basiert auf Google model-viewer — produktionsreifes WebGL-Rendering mit PBR-Materialunterstützung (physikalisch basiertes Rendering)

Verwendung des glTF/GLB 3D Model Viewers

Schritt 1: 3D-Modell laden

Öffnen Sie den glTF/GLB 3D Model Viewer. Ziehen Sie eine .gltf- oder .glb-Datei aus Ihrem Dateisystem auf den Drop-Bereich. Alternativ klicken Sie auf den Drop-Bereich, um einen Datei-Dialog zu öffnen (das accept-Attribut ist auf .gltf,.glb gesetzt). Das Modell wird über eine lokale Objekt-URL geladen — es werden keine Daten über das Netzwerk gesendet.

Wenn Sie eine Datei mit einer nicht unterstützten Erweiterung ablegen, erscheint eine Toast-Meldung mit „Ungültige Datei" und nichts wird geladen.

Schritt 2: Modell navigieren

Nach dem Laden zeigt der Viewer das Modell in einem 500 px hohen Viewport. Navigieren Sie mit der Maus:

• Linksklick und ziehen — um das Modell kreisen
• Scrollrad — hinein- und herauszoomen
• Rechtsklick und ziehen — Kamera schwenken

Touch-Gesten funktionieren auf Mobilgeräten gleichwertig: Ein-Finger-Ziehen zum Umkreisen, Pinch zum Zoomen, Zwei-Finger-Ziehen zum Schwenken.

Der Modellname erscheint im Bedienfeld in Monospace-Schrift. Klicken Sie jederzeit auf Neues Modell laden, um das aktuelle Modell zu entladen und zur Drop-Zone zurückzukehren.

Schritt 3: Beleuchtung einstellen

Wählen Sie im Bedienfeld rechts eines der fünf Umgebungslicht-Presets durch Anklicken des Namens:

Das gewählte Preset wird mit einem gefüllten Hintergrund hervorgehoben. Änderungen werden sofort übernommen — kein Neuladen erforderlich.

Schritt 4: Belichtung und Schatten feinabstimmen

Unterhalb der Licht-Presets geben Ihnen zwei Schieberegler zusätzliche Kontrolle:

• Belichtung (0,1–3,0) — erhöht oder verringert die Gesamthelligkeit der Szene. Ein Wert von 1,0 ist die neutrale Referenz. Versuchen Sie 1,5–2,0 für dunkle Modelle, die mehr Helligkeit benötigen.
• Schattenintensität (0,0–2,0) — steuert, wie scharf und dunkel der Bodenschatten unter dem Modell erscheint. Setzen Sie den Wert auf 0,0, um den Schatten vollständig zu entfernen.

Beide Werte aktualisieren die <model-viewer>-Attribute in Echtzeit.

Schritt 5: Auto-Rotation umschalten und Screenshot exportieren

Verwenden Sie den Auto-Rotation-Schalter, um das Modell langsam um seine vertikale Achse drehen zu lassen oder zu stoppen. Die Auto-Rotation ist standardmäßig eingeschaltet und ermöglicht eine freihändige Ansicht des gesamten Modells.

Wenn Sie die Ansicht wie gewünscht positioniert haben, klicken Sie auf Screenshot. Das Tool erfasst das aktuelle Rendering und lädt das Ergebnis als PNG-Datei herunter, die mit Modellname, Seitenverhältnis, Licht-Preset und Auflösung benannt ist. Sie können auch eine bestimmte Screenshot-Auflösung aus dem Bedienfeld wählen — Optionen sind Viewport (aktuelle Größe), 720p, 1080p, 2K und 4K.

Praktische Beispiele

Spielasset vor der Integration prüfen

Ein Spieleentwickler erhält ein Charaktermodell als player-character.glb. Er zieht es in den Viewer, um das Asset zu prüfen: Sieht es korrekt aus, sind die Texturen unter Neutral-Beleuchtung richtig angewendet, und wie sieht der Charakter unter Warm-Beleuchtung für eine Außenszene aus? Er exportiert einen Screenshot für das Review-Ticket.

Produktmodell für eine E-Commerce-Seite prüfen

Ein E-Commerce-Team erhält ein 3D-Produktmodell eines Lieferanten im .glb-Format. Sie laden es im Viewer, wählen das Commerce-Licht-Preset (optimiert für saubere Produktfotografie), passen die Belichtung auf 1,4 an und reduzieren die Schattenintensität auf 0,5. Sie exportieren einen Screenshot als statisches Fallback-Bild für die Produktseite.

glTF-Export aus Blender validieren

Ein 3D-Künstler exportiert eine Szene aus Blender als .gltf-Datei und öffnet sie im Viewer für einen Schnell-Check: Lädt das Modell ohne Fehler? Rendern die Materialien mit korrekten Farben? Ist der Maßstab angemessen? Die Orbit-Steuerung erlaubt eine schnelle Rundumsicht. Das Spruit-Sunrise-Preset hilft zu prüfen, wie das Modell im natürlichen Außenlicht aussieht.

Tipps und Best Practices

Der Parameter idealAspect: true im Screenshot-Export sorgt dafür, dass das aufgenommene Bild dem aktuellen Seitenverhältnis des Viewers entspricht, anstatt einen quadratischen Zuschnitt zu erzwingen. Wenn Ihr Modell breiter als hoch ist, spiegelt der Screenshot das wider.

Die model-viewer-Webkomponente unterstützt PBR-Materialien (physikalisch basiertes Rendering), die in der glTF-Spezifikation definiert sind. Wenn ein Modell flach oder ausgewaschen wirkt, prüfen Sie, ob es mit PBR-Materialien aus Ihrer 3D-Software exportiert wurde. Modelle ohne Materialdaten rendern in der Standard-Grauschattierung.

Bei .gltf-Dateien mit externen Texturenreferenzen kann das Laden über den Datei-Dialog scheitern, da der Browser nicht auf andere Dateien im Verzeichnis zugreifen kann. Verwenden Sie das .glb-Format (das alle Texturen einbettet) für zuverlässiges Laden im Browser.

Der Viewer rendert unabhängig von den Abmessungen des Modells mit einer Höhe von 500 px. Positionieren Sie das Modell mit den Orbit-Steuerelementen und machen Sie dann einen Screenshot — der Screenshot erfasst das Rendering in den tatsächlichen Anzeigedimensionen.

Häufige Probleme und Fehlerbehebung

„Ungültige Datei"-Fehler. Das Tool akzeptiert nur Dateien, die auf .gltf oder .glb enden (Groß-/Kleinschreibung unabhängige Prüfung mit .match(/\.(gltf|glb)$/i)). Benennen Sie Ihre Datei bei Bedarf um oder prüfen Sie, ob Ihr Exporttool das richtige Format erzeugt.

Modell lädt, aber Texturen fehlen. Wenn Sie eine .gltf-Datei (die JSON-Variante) laden, müssen die zugehörigen Texturbilder und Binärpufferdateien im selben Verzeichnis liegen. Der Datei-Dialog des Browsers gewährt nur Zugriff auf die einzeln ausgewählte Datei, nicht auf das Verzeichnis. Verwenden Sie das .glb-Format, um alles in einer Datei zu bündeln.

Screenshot schlägt fehl mit „Screenshot-Fehler"-Toast. Die Methode model-viewer.toBlob() setzt voraus, dass WebGL verfügbar ist. Wenn WebGL in Ihrem Browser deaktiviert ist oder der Grafiktreiber es blockiert, schlagen Screenshots fehl. Prüfen Sie chrome://settings/graphics (Chrome) oder das Äquivalent Ihres Browsers.

Auto-Rotation stoppt nicht. Der Auto-Rotation-Schalter steuert das auto-rotate-Attribut in Echtzeit. Wenn das Umschalten die Rotation nicht stoppt, klicken Sie auf das Modell, um die Kamerasteuerung zurückzugewinnen (dadurch wird auch die Auto-Rotation gemäß dem Standardverhalten von model-viewer pausiert).

Datenschutz und Sicherheit

Der glTF/GLB 3D Model Viewer lädt Ihre Modelldateien über browser-lokale URL.createObjectURL() — die Daten verlassen Ihr Gerät nie. Die Google-model-viewer-Komponente wird als JavaScript-Bibliothek geladen und rendert vollständig auf Ihrer GPU via WebGL. Keine Modellgeometrie, Texturen oder Metadaten werden an einen Server übertragen. Das macht das Tool sicher für proprietäre 3D-Assets, unveröffentlichte Produkte oder vertrauliche industrielle Designs.

Häufig gestellte Fragen

Ist der glTF/GLB 3D Model Viewer kostenlos?

Ja, vollständig kostenlos ohne Konto und ohne Nutzungslimits. Er ist Teil des kostenlosen Tool-Pakets von Glyph Widgets.

Funktioniert der glTF/GLB 3D Model Viewer offline?

Sobald die Seite geladen ist (einschließlich der @google/model-viewer-Komponente), können Sie lokale Modelldateien ohne Internetverbindung laden und anzeigen. Der erste Seitenaufruf erfordert Netzwerkzugang zum Herunterladen der Viewer-Bibliothek.

Sind meine Daten beim glTF/GLB 3D Model Viewer sicher?

Ihre Modelldateien werden via URL.createObjectURL() geladen und lokal in WebGL gerendert. Keine Geometrie, Textur oder Metadaten werden an einen Server gesendet. Googles model-viewer-Komponente läuft vollständig im Browser.

Welche Dateiformate unterstützt das Tool?

Nur .gltf (JSON + externe Dateien) und .glb (binäres gebündeltes Format). Andere 3D-Formate (.obj, .fbx, .stl, .dae) werden nicht unterstützt. Konvertieren Sie mit Tools wie Blender oder dem Khronos-glTF-Konverter zu glTF, bevor Sie laden.

Was ist der Unterschied zwischen glTF und GLB?

glTF ist eine JSON-Textdatei, die externe Binärpuffer und Texturbilder referenziert. GLB ist das binäre Container-Format, das JSON, Puffer und Texturen in einer einzigen Datei bündelt. Für das Laden im Browser wird GLB dringend empfohlen, da alle Assets in sich geschlossen sind.

Welche Licht-Presets sind verfügbar?

Die fünf Presets sind: Neutral (ausgewogenes Studio-Licht), Warm (Bernstein-/Warmtöne), Legacy (klassisches Rendering), Commerce (sauberes, kontrastreishes Produktlicht) und Spruit Sunrise (natürliches Außenlicht). Diese entsprechen dem environment-image-Attribut der model-viewer-Komponente.

Was macht der Belichtungsregler?

Die Belichtung passt die Gesamthelligkeit der gerenderten Szene von 0,1 bis 3,0 an. Der Standardwert ist 1,0. Werte über 1,0 hellen die Szene auf; Werte unter 1,0 verdunkeln sie. Das entspricht der Belichtungseinstellung in der Fotografie oder einem Renderer.

Kann ich animierte glTF-Modelle anzeigen?

Die model-viewer-Komponente unterstützt glTF-Animationen, aber die Glyph-Widgets-Oberfläche bietet keine Wiedergabesteuerung für Animationen. Auto-Rotation ist die einzige Bewegungsfunktion in der aktuellen Benutzeroberfläche. Wenn Sie glTF-Animationen in der Vorschau anzeigen müssen, verwenden Sie ein spezielles Tool wie den Khronos glTF Sample Viewer.

Mit welcher Auflösung werden Screenshots exportiert?

Sie können aus fünf Auflösungsoptionen im Bedienfeld wählen: Viewport (aktuelle Anzeigegröße), 720p (1280x720), 1080p (1920x1080), 2K (2560x1440) und 4K (3840x2160). Bei Viewport-Auflösung entspricht der Screenshot den Anzeigedimensionen des Viewers. Bei höheren Auflösungen verändert das Tool die Größe des Viewer-Elements vorübergehend zum Rendern und stellt sie danach wieder her.

Kann ich sehr große GLB-Dateien laden?

Es gibt kein erzwungenes Größenlimit, aber große Dateien (50 MB+) können einige Sekunden brauchen, um die lokale Objekt-URL zu erstellen und den model-viewer-Renderer zu initialisieren. Die Leistung hängt von Browser, GPU und verfügbarem RAM ab.

Verwandte Tools

• Demnächst verfügbar: Image Converter — konvertieren Sie aus dem Viewer exportierte Screenshots in andere Bildformate
• Demnächst verfügbar: SVG to PNG — konvertieren Sie SVG-basierte Design-Assets, die 3D-Workflows ergänzen
• Demnächst verfügbar: EXIF Viewer — prüfen Sie Metadaten in Fotos, die als Referenzbilder für 3D-Modellierung verwendet werden

Jetzt glTF/GLB 3D Model Viewer ausprobieren: Glyph Widgets glTF/GLB 3D Model Viewer