Deze component wordt niet ondersteund voor Google Ads, Google AdMob, AMP HTML-advertenties, videoadvertenties of beeldadvertenties.
Met de component 3D-modelviewer kunt u een 3D-model in GLB-indeling insluiten in uw advertentie dat door gebruikers kan worden gedraaid, gepand of gezoomd. U kunt het model ook configureren in de 3D-editor van Google Web Designer.
3D Model Editor - Car configurator and hyper-casual game tutorial in Google Web Designer
Browsercompatibiliteit
Microsoft Edge ondersteunt de component 3D-modelviewer niet.
De component 3D-modelviewer aan uw project toevoegen:
- Open het deelvenster Componenten en vervolgens de map Grafische elementen en effecten.
- Sleep de component 3D-modelviewer naar het werkvlak.
- Geef in het gedeelte 3D-modelviewer van het deelvenster Eigenschappen het GLB-bestand op dat u als bron wilt gebruiken. Klik op de knop Browsen
om een bestand uit uw bestandssysteem te selecteren.
- Dubbelklik op de component op het werkvlak om het dialoogvenster 3D-editor te openen en het model te configureren. Klik op Opslaan als u klaar bent.
U kunt uw voorkeuren voor Google Web Designer aanpassen (Bewerken > Voorkeuren... > Componenten) om automatisch een component 3D-modelviewer te maken wanneer u een GLB-bestand naar het werkvlak sleept.
Eigenschappen
U ziet de eigenschappen van de component in het deelvenster Eigenschappen. (U moet de 3D-editor sluiten.)
Eigenschap | Beschrijving |
---|---|
Naam |
De naam van de component 3D-modelviewer. |
Bron |
Het GLB-bronbestand voor het 3D-item. Het itembestand mag niet groter zijn dan 3 MB. Zie de handleiding voor 3D-items voor aanvullende richtlijnen en gebruik de Khronos glTF Validator om te controleren of uw GLB-bestand geldig is. |
Geavanceerde eigenschappen
Eigenschap | Beschrijving |
---|---|
Icoon van cue voor gebaar |
De afbeelding die wordt weergegeven over het 3D-model om de gebruiker te vragen een actie uit te voeren met het model. De cue voor gebaar beweegt enigszins om de aandacht van de gebruiker te trekken tot de animatielimiet is bereikt. De cue verdwijnt zodra de gebruiker een actie uitvoert met het model. Kan worden gebonden aan dynamische gegevens. |
Tekst voor cue van gebaar |
De tekst die wordt weergegeven onder het icoon voor de cue voor gebaar. Dit is alleen van toepassing als een icoon voor de cue voor gebaar is opgegeven. Kan worden gebonden aan dynamische gegevens. |
Animatielimiet instellen |
Vink dit selectievakje aan en stel een duur in seconden in om te beperken hoelang de animatie voor de cue voor gebaar duurt. Kan worden gebonden aan dynamische gegevens. |
3D-editor
Zo opent u het dialoogvenster 3D-editor:
- Dubbelklik op de component 3D-modelviewer op het werkvlak.
U ziet een voorbeeld van het 3D-model dat u kunt draaien en zoomen. U kunt ook interactie met het model hebben via hotspots.
Gebruik het venster aan de rechterkant om het model te configureren. Configuraties zijn ingedeeld in twee hoofdtabbladen: GLB en Component.
Tabblad GLB
Wijzigingen die u aanbrengt op het tabblad GLB, worden opgeslagen in het bronbronbestand in de itemmap. Dit geldt voor alle afbeeldingsbestanden die als textuur worden gebruikt (deze worden in het GLB-bestand gebundeld). U kunt uw voorkeuren voor Google Web Designer instellen om ongebruikte texturen automatisch te verwijderen.
|
|
---|---|
Bron |
Het GLB-bronbestand voor het 3D-model. Dit veld is alleen-lezen. Als u het bronbestand wilt wijzigen, sluit u het dialoogvenster van de 3D-editor en bewerkt u de eigenschap Bron in het deelvenster Eigenschappen. |
Details |
Grootte: De grootte van het bronbestand. |
|
|
Materialen |
U kunt één materiaal tegelijk configureren.
|
Basiskleur |
De beginkleur en -textuur die voor het huidige materiaal moet worden gebruikt. |
Metallic/ruwheid |
De eigenschappen Metallic en Ruwheid bepalen hoe licht van het materiaal af reflecteert.
|
Gewone kaart |
Selecteer een textuur om oneffenheden en oppervlakdetails aan het materiaal toe te voegen. |
Stralend |
Selecteer een kleur en een textuur om de glans van het materiaal weer te geven. |
Occlusie |
Selecteer een textuur om schaduwen door omgevingslicht weer te geven. |
Overig |
Extra opties instellen voor het materiaal:
|
Tabblad Component
Wijzigingen die u aanbrengt op het tabblad Component, ziet u in de component 3D-modelviewer en niet in het onderliggende GLB-bronbestand.
HDR-bestanden
HDR-afbeeldingsbestanden (High Dynamic Range) kunnen worden gebruikt voor de achtergrond en het omgevingslicht in de component 3D-modelviewer. Elk HDR-bestand moet kleiner zijn dan 150 KB. We raden u aan het formaat van grote HDR-bestanden aan te passen naar 256 x 128 om binnen deze limiet te blijven.
|
|
---|---|
Achtergrond |
Afbeelding: Selecteer een afbeelding of een omgeving (een HDR-bestand) die u als achtergrond wilt gebruiken. Kan worden gebonden aan dynamische gegevens. |
Omgevingslicht (HDR) |
U kunt op afbeeldingen gebaseerde belichting gebruiken voor gedetailleerde belichting die gebaseerd is op een omgeving in de echte wereld.
|
Animaties |
Als het GLB-bronbestand animaties bevat, kunt u een animatie instellen die u automatisch wilt laten afspelen. De 3D-editor biedt momenteel geen ondersteuning voor het maken van animaties.
|
|
|
Eerste cameraweergave |
Met de eerste cameraweergave bepaalt u welke camera-instellingen moeten worden gebruikt als de component wordt geladen. Limieten voor camerarotatie en camerazoom die hieronder worden ingesteld, worden afgedwongen.
|
Draaipunt |
Het draaipunt is het punt in de 3D-ruimte waaromheen de camera draait. Standaard is dit ingesteld op het midden van het 3D-model.
|
Gezichtsveld |
Het verticale gezichtsveld van de camera.
|
Limieten voor camerarotatie |
Als u wilt beperken hoe ver gebruikers het model kunnen draaien, vinkt u het selectievakje Gieren of Stampen aan en stelt u de minimale en maximale hoeken in.
|
Limieten voor camerazoom |
|
|
|
Hotspots |
Hotspots zijn punten in het 3D-model waarmee gebruikers interactie kunnen hebben. U kunt infokaarten weergeven of gebeurtenissen instellen als reactie op hotspots waarop wordt geklikt.
|
Afbeelding |
U kunt het uiterlijk van hotspots aanpassen door afbeeldingen op te geven voor verschillende staten. Alle hotspots maken gebruik van dezelfde reeks afbeeldingen.
|
Stijlen voor infokaarten |
U kunt de weergave van de infokaart aanpassen door de kleuren in te stellen.
|
Gebeurtenissen en acties
GebeurtenissenGebeurtenissen kunnen worden gebruikt om andere acties in uw advertentie te activeren. De component 3D-modelviewer stuurt de volgende gebeurtenissen:
Gebeurtenis | Beschrijving |
---|---|
3D-scène weergegeven | Wordt gestuurd nadat de scène van het 3D-model voor de eerste keer is weergegeven. |
Camera gewijzigd | Wordt gestuurd als een van de eigenschappen van de 3D-camera is gewijzigd. Als de gebruiker de camera aanpast, bevat het object event.detail de property source: user-interaction . |
Op hotspot geklikt | Wordt gestuurd als er op een hotspot wordt geklikt (die is ingesteld in de 3D-editor). Het object event.detail bevat de naam van de hotspot waarop is geklikt, de index van de hotspot in de lijst met hotspots van de scène, en de x- en y-schermcoördinaten van de hotspot. |
Interactie gestart | Wordt gestuurd als de gebruiker een actie uitvoert met het 3D-model. |
Interactie beëindigd | Wordt gestuurd als de gebruiker geen actie meer uitvoert met het 3D-model. |
Stel de component 3D-modelviewer in als target als u een van deze gebeurtenissen wilt selecteren in het dialoogvenster Gebeurtenissen.
De volgende acties voor de component 3D-modelviewer kunnen worden geactiveerd als reactie op andere gebeurtenissen:
Gebeurtenis | Beschrijving | Configuratieopties |
---|---|---|
Gieren instellen | Wijzigt het model naar de opgegeven waarde voor gieren (rotatie rond de verticale as) en pauzeert de inactieve animatie. |
|
Doelwaarde voor gieren instellen | Draait het model op vloeiende wijze naar de opgegeven waarde voor gieren. |
|
Doelwaarde voor stampen instellen | Draait het model op vloeiende wijze naar de opgegeven waarde voor stampen (rotatie rond de lengteas). |
|
Doelwaarde voor stampen verhogen | Draait het model op vloeiende wijze naar de doelwaarde voor stampen op basis van het opgegeven aantal. Als het model de doelwaarde voor stampen al heeft bereikt, is er geen effect. |
|
Doelwaarde voor zoomen instellen | Zoomt op vloeiende wijze naar het opgegeven zoomniveau. |
|
Doelwaarde voor zoomen verhogen | Verhoogt de doelwaarde voor zoomen (meter). |
|
Doelwaarde voor draaien instellen | Wijzigt het middelpunt voor rotatie en verplaatst de camera op vloeiende wijze naar waar deze rond dat punt kan draaien. |
|
Doelwaarde voor lokaal meedraaien instellen | Verplaatst de camera op vloeiende wijze naar een nieuwe positie. |
|
Materiaalkleur instellen | Stelt de materiaalkleur in. |
|
Animatie afspelen | Speelt de opgegeven animatie af. |
|
Animatie onderbreken | Onderbreekt de opgegeven animatie. |
|
Animatietijd instellen | Zoekt de opgegeven tijd tijdens een animatie. |
|
Stel de component 3D-modelviewer in als ontvanger als u een van deze acties selecteert in het dialoogvenster Gebeurtenissen.
Er is nog een methode beschikbaar met aangepaste code.
getCameraDetails()
Retourneert een object met details over de huidige camera-instellingen.
Eigenschappen van het geretourneerde object:
- yaw: De rotatie rond de verticale as in graden.
- pitch: De rotatie rond de horizontale as in graden.
- zoom: Het zoomniveau in meters.
- x: De x-positie van het punt waaromheen de camera draait.
- y: De y-positie van het punt waaromheen de camera draait.
- z: De z-positie van het punt waaromheen de camera draait.
Gevorderde gebruikers kunnen ook de documentatie op https://modelviewer.dev raadplegen.
Voorbeeld
U kunt alleen een voorbeeld van de component 3D-modelviewer bekijken in de 3D-editor of in de browser door op de knop Voorbeeld in de rechterbovenhoek te klikken.