Am einfachsten bindest du eine GLB mit „model-viewer“, einer Web-Komponente von Google, in deine Website ein. Füge ein script-Element zum Laden hinzu, setze ein model-viewer-Tag in die Seite, trage den Speicherort der GLB im Attribut src ein und ergänze das Attribut camera-controls – schon können Besucher das 3D-Modell mit der Maus oder dem Finger drehen.
Dieser Artikel vergleicht drei Wege, eine GLB ins Web zu bringen, zeigt das Einbinden mit model-viewer und die wichtigsten Attribute und behandelt dann, was hilft, wenn das Modell nicht erscheint, wie es sich auf dem Smartphone verhält und wie du mehrere Werke anordnest. Am sichersten bekommst du korrektes HTML samt Versionsnummer, wenn du es aus der offiziellen Dokumentation kopierst. Deshalb erklärt dieser Artikel Namen und Aufgabe der Attribute und verlinkt für den Code selbst auf die offiziellen Seiten. Die Angaben zu model-viewer haben wir im November 2026 in der offiziellen Dokumentation geprüft.
Hinweis: Figmee bietet derzeit Bilder im Figuren-Stil aus deinen Zeichnungen, 3D-Modelldaten (GLB / 3MF) und Drehvideos deiner 3D-Modelle an. Die Bestellung physischer 3D-Drucke ist Coming Soon. Aus Fotos und fotoähnlichen Bildern kann Figmee keine 3D-Modelle erstellen – Grundlage sind Zeichnungen.
Welche Wege gibt es, eine GLB auf eine Webseite zu bringen?
Es gibt drei Wege, Besucher eine GLB im Browser drehen zu lassen: sie in die eigene Website einbinden, den Freigabelink des Dienstes verschicken, mit dem du sie erstellt hast, oder sie auf eine 3D-Plattform hochladen und von dort einbetten. Willst du das Modell auf deiner eigenen Website und in deinem eigenen Design zeigen, ist model-viewer die richtige Wahl.
| Weg | Auf der eigenen Website sichtbar? | Aufwand | Dateigröße | Passt für |
|---|---|---|---|---|
| Mit model-viewer einbinden | Ja | HTML ergänzen und GLB selbst hosten | Die GLB wird so geladen, wie sie ist – verkleinern musst du sie selbst | Leute mit Portfolio-Website, die HTML bearbeiten können |
| Freigabelink von Figmee | Nein (du verschickst einen Link) | Einen Schalter auf der Werkseite umlegen | Kein Thema | Ein mit Figmee erstelltes Modell sofort zeigen |
| Plattform wie Sketchfab | Ja, über den eingefügten Einbettungscode | Konto anlegen und hochladen | Nach den Limits der Plattform | Modelle aus verschiedenen Programmen an einem Ort sammeln |
Bei Sketchfab erhältst du über den Einbetten-Button (Embed) unter dem Viewer auf der Modellseite den HTML-Code zum Einfügen in deine Seite. Laut Hilfe-Center lassen sich auch private und passwortgeschützte Modelle einbetten (Quelle: Sketchfab Help Center, „Embedding your 3D models“, Stand November 2026). Wie du per Freigabelink teilst und was nach dem Veröffentlichen sichtbar ist, erklärt 3D-Modell online veröffentlichen.
Was ist model-viewer?
model-viewer ist eine Open-Source-Web-Komponente von Google (Apache License 2.0), die mit einem einzigen Tag in der Seite ein 3D-Modell anzeigt und drehbar macht. Sie liest nur glTF und GLB, und laut offizieller FAQ soll das auch so bleiben (Quelle: model-viewer FAQ, Stand November 2026).
- Laden: Füge das script-Element mit
type="module"aus dem offiziellen README in deine Seite ein. Es lädt vom CDN von Google (ajax.googleapis.com), die Versionsnummer steht mitten in der URL. Auf npm heißt das Paket@google/model-viewer(Quelle: README von model-viewer, Stand November 2026). - Version: Am 7. November 2026 ist 4.4.0 die neueste Version auf npm (Quelle: npm, „@google/model-viewer“).
- Browser: Laut README werden die jeweils letzten zwei Hauptversionen aller sich automatisch aktualisierenden Browser (etwa Chrome, Firefox, Safari und Edge) auf Desktop und Mobilgeräten unterstützt.
Eine GLB von Figmee bündelt Form und Farbe (Texturen) in einer Datei. Du musst also keine Bilder getrennt hochladen – eine einzige GLB genügt. Wie GLB-Dateien aufgebaut sind, erklärt Was ist eine GLB-Datei?, und welche Zeichnungen sich gut für 3D eignen, steht im Guide zum Umwandeln einer Illustration in 3D.
Wie bindest du sie Schritt für Schritt ein?
Es sind fünf Schritte: GLB vorbereiten und verkleinern, hochladen, Ladezeile ergänzen, Tag mit Attributen setzen und auf Desktop und Smartphone prüfen. Auf einer Website, deren HTML du bearbeiten kannst, solltest du für das erste Modell etwa 30–50 Minuten einplanen.
- GLB vorbereiten und verkleinern (10–30 Minuten): Wähle bei Figmee auf der Werkseite „Speichern“ und dann „3D-Modell (GLB)“ (für das Speichern werden keine zusätzlichen Token verbraucht). Wenn die Datei voraussichtlich langsam lädt, verkleinere sie in dieser Reihenfolge: Texturen, Polygone, Kompression (siehe GLB-Dateigröße reduzieren).
- GLB hochladen (5 Minuten): Am einfachsten lädst du sie auf denselben Server (dieselbe Domain) wie die Seite. Liegt sie auf einer anderen Domain, muss dieser Server CORS-Header senden (siehe unten „Was tun, wenn es langsam lädt oder nichts erscheint?“).
- Ladezeile ergänzen (2 Minuten): Kopiere das script-Element aus dem offiziellen README, setze die Versionsnummer ein (zum Beispiel 4.4.0) und füge es in den head der Seite ein.
- Tag setzen und Attribute vergeben (5 Minuten): Setze ein
model-viewer-Tag an die gewünschte Stelle, trage insrcdie URL der GLB und inalteine kurze Beschreibung ein und ergänzecamera-controls. Weitere Attribute wählst du aus der Tabelle unten. Beispiele für das Markup findest du in der Dokumentation von model-viewer. - Auf Desktop und Smartphone prüfen (5 Minuten): Lässt sich das Modell drehen? Was ist während des Ladens zu sehen? Kannst du auf dem Smartphone noch vertikal durch die Seite scrollen? Stimmen Farben und Glanz?
Diese Attribute brauchst du am häufigsten (Quelle: Dokumentation von model-viewer, Stand November 2026):
| Attribut | Aufgabe | Hinweise |
|---|---|---|
src | URL der anzuzeigenden GLB | Nur glTF und GLB |
alt | Text, der das Modell beschreibt | Ein kurzer Satz zum Werk, damit auch Menschen mit Screenreader wissen, worum es geht |
camera-controls | Drehen mit Maus oder Finger erlauben | Laut Dokumentation sollte es fast immer gesetzt sein |
auto-rotate | Dreht das Modell automatisch | Startet standardmäßig nach 3000 ms (auto-rotate-delay); die Geschwindigkeit regelt rotation-per-second |
poster | Bild, das bis zum Laden des Modells erscheint | Die FAQ empfiehlt, immer ein nahtlos übergehendes Poster zu verwenden |
loading | Wann geladen wird (auto, lazy, eager) | Standard auto lädt, wenn sich das Modell dem sichtbaren Bereich nähert; eager lädt sofort |
camera-orbit | Startwinkel und Abstand der Kamera | Standard ist „0deg 75deg 105%“ (horizontaler Winkel, vertikaler Winkel, Abstand) |
touch-action | Zusammenspiel mit dem Scrollen auf Mobilgeräten (pan-y, pan-x, none) | Standard pan-y lässt vertikales Scrollen zu, horizontale Gesten drehen das Modell |
shadow-intensity | Stärke des Schattens unter dem Modell | 0 schaltet den Schatten aus |
exposure | Helligkeit (Belichtung) | Anpassen, wenn das Modell zu hell oder zu dunkel wirkt |
ar | AR auf unterstützten Geräten | Jedes Gerät hat eigene Voraussetzungen, daher zuletzt testen |
GLBs von Figmee enthalten keine Animation, die Animations-Attribute von model-viewer brauchst du also nicht. Auch die Pose lässt sich nicht ändern. Lege die Ansicht, die du zeigen willst, stattdessen mit camera-orbit fest, das die Kamera beim Laden der Seite positioniert.
Was tun, wenn es langsam lädt oder nichts erscheint?
Erscheint gar nichts, prüfe der Reihe nach die URL der GLB, die Domain, auf der sie liegt (CORS), und die Ladezeile. Erscheint das Modell, sieht aber falsch aus, such das Symptom in der Tabelle.
| Symptom | Häufige Ursache | Abhilfe |
|---|---|---|
| Es erscheint nichts | Falsche URL in src, fehlende Ladezeile oder falsche Versionsnummer | In den Entwicklertools des Browsers in Konsole und Netzwerk-Tab prüfen, ob GLB und Skript geladen werden |
| Nur eine GLB auf einer anderen Domain lädt nicht | Durch CORS blockiert | Den Server mit der GLB so einstellen, dass er CORS-Header sendet, die die Domain deiner Seite erlauben (laut offizieller FAQ) |
| Nichts erscheint, wenn du die HTML-Datei direkt vom Rechner öffnest | Browser können das Laden aus einer lokal geöffneten Datei blockieren | Über einen lokalen Server oder den echten Server testen |
| Es dauert lange, bis etwas erscheint | Die GLB ist groß | Bei den Texturen beginnend verkleinern und die Ladephase mit poster gestalten |
| Eine komprimierte GLB erscheint nicht | Sie wurde mit meshopt komprimiert | model-viewer aktiviert seinen meshopt-Decoder standardmäßig nicht. Mit Draco neu komprimieren oder meshoptDecoderLocation setzen |
| Kanten glänzen wie Metall | Hoher Metallic-Wert im Material | In Blender den Metallic-Wert des Materials senken und neu exportieren (siehe unten) |
Die Erklärung zu CORS steht in der offiziellen FAQ unter „Why am I getting CORS errors?“, die Standardorte der Decoder unter dracoDecoderLocation und meshoptDecoderLocation in der Dokumentation (beides Stand November 2026).
Das letzte Symptom, glänzende Kanten, kann bei GLBs aus Figmee leicht auftreten. Sie werden mit einem hohen Metallic-Wert in den Materialien exportiert, und der Viewer von Figmee zeigt sie mit auf 0 gesetztem Metallic-Wert an. Deshalb kann dieselbe GLB in model-viewer oder anderen Viewern metallisch wirkende Glanzlichter an den modellierten Kanten zeigen. Stört dich das, importiere sie in Blender, setze den Metallic-Wert des Materials nahe 0 (hängt am Metallic-Eingang ein Bild, trenne diese Verbindung, bevor du den Wert änderst), exportiere die GLB neu und prüfe dort, wo du sie hostest, ob sich der Glanz verändert hat. Den Import in Blender beschreibt Eine GLB von Figmee in Blender importieren.
Funktioniert das auch auf dem Smartphone?
Ja. model-viewer unterstützt mobile Browser, und mit camera-controls drehen Besucher das Modell, indem sie mit dem Finger darüberwischen. Zwei Punkte brauchen Aufmerksamkeit: das Zusammenspiel mit dem Scrollen und der Speicher.
- Scrollen: Mit dem Standardwert pan-y für
touch-actionscrollt eine vertikale Wischbewegung die Seite, eine horizontal begonnene Geste dreht das Modell. Mit none scrollt die Seite über dem Modell gar nicht mehr. Füllt das Modell den ganzen Bildschirm, prüfe also, ob Besucher noch weiterlesen können. - Speicher: Große Texturen belegen beim Anzeigen viel Speicher, auch wenn die Datei selbst klein ist, und können Smartphones ausbremsen. Eine geringere Texturauflösung hilft (Details in GLB-Dateigröße reduzieren).
Mit dem Attribut ar können Besucher auf unterstützten Geräten AR starten (das 3D-Modell durch die Kamera in ihre Umgebung stellen). Google veröffentlicht für Scene Viewer unter Android Empfehlungen etwa zu Dateigröße und Dreieckszahl sowie die unterstützten Erweiterungen (Quelle: Google ARCore, „Scene Viewer“, Stand November 2026). Wenn du AR nutzen willst, teste mit einer GLB, die diese Voraussetzungen erfüllt.
Wie ordnest du mehrere Werke an?
Jedes weitere Modell auf einer Seite erhöht Ladezeit und Speicherbedarf. Leicht bleibt meist ein Aufbau mit einer Galerieseite aus Standbildern (denselben Bildern wie die Poster), die jeweils auf eine eigene Seite pro Werk mit einem einzigen drehbaren Modell verlinken.
- Bilder in der Galerie, 3D auf der Detailseite: Zeig das drehbare Modell erst, wenn jemand die Seite eines Werks öffnet.
- Wenn du mehrere Modelle auf eine Seite setzt: Der Standardwert von
loading(auto) lädt jedes Modell, sobald es sich dem sichtbaren Bereich nähert – Modelle weiter unten werden also erst geladen, wenn Besucher dorthin scrollen. Mit einemposterfür jedes Modell bleibt das Layout schon vor dem Laden ordentlich. - Die Originalzeichnung daneben zeigen: Steht die ursprüngliche Illustration neben dem 3D-Modell, ist klar, woraus es entstanden ist.
Hast du keine eigene Website oder suchst einen Ort, an dem alles beisammen ist, hilft auch die Creator-Seite von Figmee: Aktiviere die Veröffentlichung in Mein Konto, dann entsteht eine Profilseite mit deinen veröffentlichten Werken. Wie du eine GLB an andere schickst, damit sie sie ansehen können, zeigt 5 kostenlose Wege, 3D-Modelle anzusehen.
Häufige Fragen
Funktioniert das auch bei WordPress oder anderen Blog-Plattformen?
Das hängt davon ab, ob du dort HTML mit einem script-Element einfügen kannst. Wo das nicht geht, lässt sich model-viewer unter Umständen nicht nutzen. Dann bleibt die Einbettung über Sketchfab (dessen Hilfe-Center erklärt auch das Einbetten bei WordPress und ähnlichen Plattformen) oder ein Link auf eine Freigabeseite.
Können Besucher meine GLB speichern?
Damit das Modell angezeigt werden kann, wird die GLB-Datei an den Browser der Besucher geschickt. Geh also davon aus, dass jeder, der die URL findet, sie speichern kann. Stammt das Modell aus einer beauftragten Zeichnung, frag die Künstlerin oder den Künstler vor dem Veröffentlichen (siehe Darf man eine beauftragte Illustration in 3D umwandeln?).
Kostet das etwas?
model-viewer ist Open Source und kostenlos nutzbar. Für das Hosting der GLB fallen die Kosten deines Hosting-Anbieters an. Bei Figmee kostet die Erstellung eines 3D-Modells 5 Token (das erste pro Konto ist kostenlos), und das Speichern der GLB verbraucht keine zusätzlichen Token.
Zusammenfassung
model-viewer ist der einfachste Weg, eine GLB in deine Website einzubinden. Verkleinere die GLB, lade sie hoch, kopiere die Ladezeile aus dem offiziellen README, starte mit src, alt und camera-controls und ergänze bei Bedarf poster oder auto-rotate. Erscheint nichts, prüfe URL, CORS und Ladezeile; glänzen die Kanten, prüfe den Metallic-Wert des Materials. Achte auf dem Smartphone auf das Zusammenspiel mit dem Scrollen und die Größe der Texturen.
Möchtest du eine drehbare 3D-Version deines Charakters in dein Portfolio stellen, erstelle in Figmee aus deiner Zeichnung ein 3D-Modell, speichere die GLB und binde sie mit den Schritten oben ein.
