Die Komponente „3D-Modellansicht“ und der 3D-Editor

Diese Komponente wird nicht für Google Ads, Google AdMob, AMPHTML-Anzeigen, Videoanzeigen oder Bildanzeigen unterstützt.

Mit der Komponente „3D-Modellansicht“ lässt sich ein 3D-Modell im GLB-Format in Ihre Anzeige einbetten, das Nutzer drehen, schwenken oder zoomen können. Sie haben auch die Möglichkeit, das Modell im 3D-Editor von Google Web Designer zu konfigurieren.

3D Model Editor - Car configurator and hyper-casual game tutorial in Google Web Designer

Browserkompatibilität

Microsoft Edge unterstützt die Komponente „3D-Modellansicht“ nicht.

So fügen Sie Ihrem Projekt die Komponente „3D-Modellansicht“ hinzu:

1. Öffnen Sie das Steuerfeld Komponenten und dann den Ordner Grafiken und Effekte.
2. Ziehen Sie die Komponente 3D-Modellansicht in den Anzeigebereich.
3. Geben Sie im Bereich 3D-Modellansicht des Steuerfelds Eigenschaften die GLB-Datei an, die Sie als Quelle verwenden möchten. Klicken Sie auf die Schaltfläche Durchsuchen , um eine Datei in Ihrem Dateisystem auszuwählen.
4. Klicken Sie doppelt auf die Komponente im Anzeigebereich, um das Dialogfeld 3D-Editor zu öffnen und das Modell zu konfigurieren. Klicken Sie zum Abschluss auf Speichern.

Sie können die Einstellungen von Google Web Designer unter Bearbeiten > Einstellungen… > Komponenten anpassen, um automatisch eine Komponente „3D-Modellansicht“ erstellen zu lassen, wenn Sie eine GLB-Datei in den Anzeigebereich ziehen.

Eigenschaften

Die Eigenschaften der Komponente sind im Steuerfeld „Eigenschaften“ sichtbar. Hierzu müssen Sie den 3D-Editor schließen.

Eigenschaft	Beschreibung
Name	Name der Komponente „3D-Modellansicht“.
Quelle	Die GLB-Quelldatei für das 3D-Asset. Die Asset-Datei darf nicht größer als 3 MB sein. Weitere Richtlinien finden Sie im Leitfaden für 3D-Assets. Mithilfe des glTF-Validierungstools Khronos können Sie prüfen, ob Ihre GLB-Datei gültig ist.

Erweiterte Eigenschaften

Eigenschaft	Beschreibung
Symbol des Gesten-Hinweises	Ein Bild, das über dem 3D-Modell angezeigt werden soll, um den Nutzer zur Interaktion mit dem Modell anzuregen. Der Gesten-Hinweis bewegt sich leicht, um die Aufmerksamkeit des Nutzers zu erregen, bis das Zeitlimit für die Animation erreicht ist, und verschwindet, sobald der Nutzer mit dem Modell interagiert. Kann an dynamische Daten gebunden werden.
Text des Gesten-Hinweises	Der Text, der unter dem Symbol des Gesten-Hinweises angezeigt werden soll. Er ist nur in Verbindung mit einem Symbol für den Gesten-Hinweis verfügbar. Kann an dynamische Daten gebunden werden.
Zeitlimit für die Animation festlegen	Klicken Sie auf dieses Kästchen und geben Sie in Sekunden an, wie lange die Animation für den Gesten-Hinweis dauern soll. Kann an dynamische Daten gebunden werden.

3D-Editor

So öffnen Sie das Dialogfeld des 3D-Editors:

• Doppelklicken Sie im Anzeigebereich auf die Komponente „3D-Modellansicht“.

Sie sehen dann eine Vorschau des 3D-Modells, die Sie drehen und zoomen können. Außerdem können Sie mit Hotspots interagieren.

Verwenden Sie das Steuerfeld auf der rechten Seite, um das Modell zu konfigurieren. Die Konfigurationen werden auf zwei Tabs durchgeführt: GLB und Komponente.

Tab „GLB“

Änderungen, die Sie auf dem Tab GLB vornehmen, werden in der Quelldatei des Modells im Ordner „Assets“ gespeichert. Das schließt alle Bilddateien ein, die als Texturen verwendet werden; sie werden in der GLB-Datei gebündelt. Über die Einstellungen von Google Web Designer können Sie nicht verwendete Texturen automatisch löschen lassen.

Informationen zur GLB-Datei
Quelle	Die GLB-Quelldatei für das 3D-Modell. Dieses Feld ist schreibgeschützt. Sie können zu einer anderen Quelldatei wechseln, indem Sie das Dialogfeld „3D-Editor“ schließen und die Komponente Quelle im Steuerfeld Eigenschaften bearbeiten.
Details	Größe: die Größe der Quelldatei.
Materialien
Materialien	Sie können nicht mehrere Materialien gleichzeitig konfigurieren. Ausgewählt: Alle Materialien, die im 3D-Modell verwendet werden, sind in diesem Drop-down-Menü aufgeführt. Wählen Sie das Material aus, das Sie ansehen oder bearbeiten möchten.
Grundfarbe	Die anfängliche Farbe und Textur, die für das aktuelle Material verwendet werden sollen.
Metallisch/Rauheit	Die Eigenschaften „Metallisch“ und „Rauheit“ bestimmen, wie Licht vom Material reflektiert wird. Textur: Wählen Sie eine Textur aus, um anzugeben, welche Teile des Materials metallisch sind. Metallisch: ein Wert zwischen 0 und 1, der angibt, wie metallisch das Material ist. Hochgradig metallisches Material spiegelt mehr von der Umgebung wider. Rauheit: ein Wert zwischen 0 und 1, der angibt, wie matt das Material ist. Dies beeinflusst die Schärfe der Reflexion. 0 bedeutet vollständig reflektierend und 1 vollständig matt.
Normale Karte	Wählen Sie eine Textur aus, die dem Material Unebenheiten und Oberflächendetails verleiht.
Leuchtend	Wählen Sie eine Farbe und eine Textur aus, die das Material zum Leuchten bringen.
Verdecken	Wählen Sie eine Textur aus, mit der Schatten durch das Umgebungslicht dargestellt werden.
Sonstiges	Legen Sie zusätzliche Optionen für das Material fest: Doppelseitig: Klicken Sie dieses Kästchen an, wenn das Material doppelseitig sein soll. Alphawert mischen: Wählen Sie aus, wie die Alphawerte (Transparenz) von Texturen behandelt werden sollen: Undurchsichtig: Alphawerte werden ignoriert und die Textur ist immer undurchsichtig. Mischen: Alphawerte zwischen 0 und 1 sind durchscheinend. Maske: Die einzelnen Teile der Textur sind vollständig undurchsichtig oder vollständig transparent, je nachdem, wie der jeweilige Alphawert im Vergleich zum festgelegten Grenzwert für Alpha ausfällt. Alphawerte, die höher sind als der Grenzwert, gelten als undurchsichtig.

Tab „Komponente“

Änderungen auf dem Tab Komponente werden in die Komponente „3D-Modellansicht“ und nicht in die zugrunde liegende GLB-Quelldatei übernommen.

HDR-Dateien

Die HDR-Bilddateien (High Dynamic Range) können für den Hintergrund und die Umgebungsbeleuchtung in der Komponente „3D-Modellansicht“ verwendet werden. Jede HDR-Datei sollte kleiner als 150 KB sein. Wir empfehlen, große HDR-Dateien auf 256 × 128 Pixel zu verkleinern, damit sie dieses Limit einhalten.

Darstellung
Hintergrund	Bild: Wählen Sie ein Bild oder eine Umgebung (eine HDR-Datei) als Hintergrund aus. Kann an dynamische Daten gebunden werden.
Umgebungsbeleuchtung (HDR)	Die bildbasierte Beleuchtung spiegelt eine Umgebung in der realen Welt wider und ist sehr detailliert. Bild: Wählen Sie ein sphärisches Bild im HDR-Format aus. Kann an dynamische Daten gebunden werden. Belichtung: der Grad der Lichtexposition. Schattenintensität: die Deckkraft der Schatten. Schattenweichheit: die Verschwommenheit der Schatten.
Animationen	Animationen in der GLB-Quelldatei können auf „Automatische Wiedergabe“ eingestellt werden. Im 3D-Editor können Animationen derzeit nicht erstellt werden. Standard: Wählen Sie eine Animation als Standard aus. Automatische Wiedergabe: Klicken Sie dieses Kästchen an, damit beim Laden der Komponente die Standardanimation wiedergegeben wird. Zeitlimit für die Animation festlegen: Klicken Sie dieses Kästchen an und geben Sie in Sekunden an, wie lange die Animation wiedergegeben werden soll, bevor sie automatisch pausiert wird.
Kamera
Anfangsansicht der Kamera	Durch die Anfangsansicht der Kamera werden die Kameraeinstellungen bestimmt, wenn die Komponente geladen wird. Alle unten festgelegten Beschränkungen für die Drehung und den Zoom der Kamera werden zwingend angewendet. Gierwinkel: wie stark die Kamera um eine vertikale Achse gedreht wird, in Grad. Neigung: wie stark die Kamera um eine horizontale Achse gedreht wird, gemessen in Grad. Zoom: wie nah die Kamera am Modell ist. Aktuelle als Anfangsansicht: Klicken Sie auf diese Schaltfläche, wenn Sie die Kameraansicht in der Vorschau des 3D-Editors angepasst haben und sie als Anfangsansicht verwenden möchten.
Orbitdrehpunkt	Der Orbitdrehpunkt ist der Punkt im 3D-Raum, um den sich die Kamera dreht. Standardmäßig ist das die Mitte des 3D-Modells. X: die x-Position des Orbitdrehpunkts. Y: die y-Position des Orbitdrehpunkts. Z: die z-Position des Orbitdrehpunkts. Zurücksetzen: auf die standardmäßigen Drehpunktkoordinaten zurücksetzen.
Sichtfeld	Dies ist das vertikale Sichtfeld der Kamera. Winkel: ein Winkel zwischen 1° und 179°.
Begrenzung der Kamerabewegung	Wenn Sie begrenzen möchten, wie weit Nutzer das Modell drehen können, klicken Sie das Kästchen für Gieren oder Neigen an und legen Sie die Mindest- und Höchstwerte für den Winkel fest. Gieren (von einer Seite zur anderen): wie weit die Kamera um eine vertikale Achse gedreht werden kann. Neigen (hoch und runter): wie weit die Kamera um eine horizontale Achse gedreht werden kann.
Begrenzung des Kamerazooms	Typ: Legen Sie fest, ob die Zoomfunktion für den Nutzer beschränkt werden soll: Entfernung für Kamera ohne Beschränkung: keine Beschränkungen. Dies ist die Standardeinstellung. Entfernung für Kamera mit Beschränkung: Sie können einen Mindest- und einen Höchstwert für den Abstand festlegen. Die Zoomstufe Min. muss auf einen niedrigeren Wert als die Zoomstufe Max. festgelegt werden. Feste Entfernung für Kamera: Der Nutzer kann die Zoomstufe nicht ändern. Die Zoomstufe Min. und die Zoomstufe Max. müssen auf denselben Wert festgelegt werden.
Hotspots
Hotspots	Hotspots sind Punkte auf dem 3D-Modell, mit denen Nutzer interagieren können. Sie haben die Möglichkeit, eine Infokarte einblenden oder ein Ereignis auslösen zu lassen, wenn Hotspots angeklickt werden. Hotspot hinzufügen: Damit lässt sich ein neuer Hotspot erstellen. Wählen Sie diese Schaltfläche aus und klicken auf den Punkt auf dem 3D-Modell, wo der Hotspot platziert werden soll. Sie können den Hotspot über die nachfolgenden Felder anpassen. Name: der Name des Hotspots. Wenn Sie einen Hotspot löschen möchten, klicken Sie neben dessen Namen auf das Symbol Löschen . Infokarte: Sie können festlegen, ob beim Anklicken eines Hotspots eine Infokarte aufgerufen werden soll: Keine: Es wird keine Infokarte aufgerufen. Infokarte: Eine Infokarte wird aufgerufen. Titel: der Titel, der auf der Infokarte angezeigt wird. Kann an dynamische Daten gebunden werden. Beschreibung: der Text, der auf der Infokarte angezeigt wird. Kann an dynamische Daten gebunden werden.
Bild	Sie können die Darstellung von Hotspots anpassen, indem Sie Bilder für verschiedene Zustände angeben. Für alle Hotspots wird auf denselben Satz von Bildern zugegriffen. Bild für neutralen Zustand: Standardbild, das verwendet wird, wenn der Nutzer nicht mit dem Hotspot interagiert. Bild für gedrückten Zustand: Bild, das verwendet wird, wenn der Nutzer auf einen Hotspot klickt. Bild für Mouseover: Bild, das verwendet wird, wenn der Nutzer den Mauszeiger über einen Hotspot bewegt. Größe: Breite und Höhe eines Hotspots.
Stile von Infokarten	Sie können die Darstellung der Infokarte anpassen, indem Sie ihre Farben festlegen. Schriftfarbe: die Farbe für den Titel und den Text der Infokarte. Hintergrundfarbe: die Farbe für den Hintergrund der Infokarte. Rahmenfarbe: die Farbe des Rahmens der Infokarte.

Ereignisse und Aktionen

Ereignisse

Mithilfe von Ereignissen können andere Aktionen in Ihrer Anzeige ausgelöst werden. Über die Komponente „3D-Modellansicht“ werden die folgenden Ereignisse gesendet:

Ereignis	Beschreibung
3D-Szene gerendert	Wird gesendet, nachdem die 3D-Modellszene zum ersten Mal gerendert wurde.
Kamera geändert	Wird gesendet, wenn sich eine der Eigenschaften der 3D-Kamera ändert. Wenn der Nutzer die Kamera anpasst, enthält das Objekt event.detail die Eigenschaft source: user-interaction.
Hotspot angeklickt	Wird gesendet, wenn auf einen im 3D-Editor festgelegten Hotspot geklickt wird. Das Objekt event.detail enthält den Namen des angeklickten Hotspots, den Index des Hotspots in der Hotspot-Liste der Szene sowie die X- und Y-Bildschirmkoordinaten des Hotspots.
Interaktion gestartet	Wird gesendet, wenn der Nutzer mit dem 3D-Modell interagiert.
Interaktion beendet	Wird gesendet, wenn der Nutzer die Interaktion mit dem 3D-Modell beendet.

Legen Sie die Komponente „3D-Modellansicht“ als Ziel fest, um eines dieser Ereignisse im Dialogfeld „Ereignis“ auszuwählen.

Aktionen

Die folgenden Aktionen der Komponente „3D-Modellansicht“ können als Reaktion auf andere Ereignisse ausgelöst werden:

Ereignis	Beschreibung	Konfigurationsoptionen
Gierwinkel festlegen	Verschiebt das Modell um den angegebenen Gierwinkel (Rotation um die Vertikalachse) und pausiert die stillstehende Animation.	Gierwinkel: Rotation um die Vertikalachse in Grad.
Ziel-Gierwinkel festlegen	Rotiert das Modell gleichmäßig zum angegebenen Gierwinkel.	Ziel-Gierwinkel: der Gierwinkel in Grad zwischen -360 und 360.
Zielneigung festlegen	Dreht das Modell gleichmäßig zur angegebenen Neigung (Rotation um die Längsachse).	Zielneigung: der Neigungswinkel in Grad.
Zielneigung erhöhen	Rotiert das Modell gleichmäßig um den angegebenen Wert in Richtung der Zielneigung. Wenn das Modell die Zielneigung bereits erreicht hat, geschieht nichts.	Neigungsdelta – die Anzahl der Grade, um die die aktuelle Neigung erhöht werden soll.
Zielzoom festlegen	Zoomt gleichmäßig auf die angegebene Zoomstufe.	Zielzoom – die Zoomstufe in Metern.
Zielzoom erhöhen	Erhöht den Zielzoom in Metern.	Zoomdelta: Verwenden Sie zum Heranzoomen einen negativen Wert.
Zieldrehpunkt festlegen	Ändert den Punkt, um den die Rotation erfolgt, und bewegt die Kamera gleichmäßig dorthin, wo sie um diesen Punkt kreisen kann.	Zieldrehpunkt X: die X-Position in Metern. Zieldrehpunkt Y: die Y-Position in Metern. Zieldrehpunkt Z: die Z-Position in Metern.
Lokale Zielposition festlegen	Verschiebt die Kamera gleichmäßig in eine neue Position.	Lokale Zielposition festlegen X: in Metern. Lokale Zielposition festlegen Y: in Metern.
Materialfarbe festlegen	Legt die Materialfarbe fest.	Name des Materials Rot: roter Wert der neuen Farbe (zwischen 0 und 1). Grün: grüner Wert der neuen Farbe (zwischen 0 und 1). Blau: blauer Wert der neuen Farbe (zwischen 0 und 1).
Animation abspielen	Spielt die angegebene Animation ab.	Name der Animation
Animation pausieren	Hält die angegebene Animation an.	Name der Animation
Dauer der Animation festlegen	Springt während der Animation zur angegebenen Zeit.	Name der Animation Dauer der Animation: wie lange die Animation dauern soll (in Sekunden).

Wenn Sie eine dieser Aktionen im Dialogfeld „Ereignis“ auswählen, legen Sie die Komponente „3D-Modellansicht“ als Empfänger fest.

Erweiterte API-Methoden

Eine weitere Methode ist bei Verwendung von benutzerdefiniertem Code verfügbar.

getCameraDetails()

Gibt ein Objekt mit Details zu den aktuellen Kameraeinstellungen zurück.

Eigenschaften des zurückgegebenen Objekts:

• yaw: Rotation um die vertikale Achse, in Grad.
• pitch: Rotation um die horizontale Achse, in Grad.
• zoom: Zoomstufe, in Metern.
• x: X-Koordinate, um die sich die Kamera dreht, in Metern.
• y: Y-Koordinate, um die sich die Kamera dreht, in Metern.
• z: Z-Koordinate, um die sich die Kamera dreht, in Metern.

Fortgeschrittene Nutzer sollten sich eventuell die Dokumentation unter https://modelviewer.dev ansehen.

Vorschau

Eine Vorschau der Komponente „3D-Modellansicht“ kann nur im 3D-Editor oder in einem Browser aufgerufen werden. Klicken Sie dazu rechts oben auf die Schaltfläche Vorschau.