De component 3D-modelviewer en de 3D-editor

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:

  1. Open het deelvenster Componenten en vervolgens de map Grafische elementen en effecten.
  2. Sleep de component 3D-modelviewer naar het werkvlak.
  3. 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.
  4. 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.

 GLB-informatie

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

Materialen

U kunt één materiaal tegelijk configureren.

  • Geselecteerd: Alle materialen die in het 3D-model worden gebruik, worden in dit dropdownmenu vermeld. Selecteer het materiaal dat u wilt bekijken of bewerken.

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.

  • Textuur: Selecteer een textuur om aan te geven welke delen van het materiaal metallic zijn.
  • Metallic: Geef een waarde op tussen 0 en 1 om aan te geven hoe metallic het materiaal moet zijn. Meer metallic materialen reflecteren meer van de omgeving.
  • Ruwheid: Geef een waarde op tussen 0 en 1 om aan te geven hoe ruw het materiaal moet zijn. Dit heeft invloed op de scherpte van reflecties. 0 is volledig reflecterend en 1 is volledig mat.

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:

  • Dubbelzijdig: Vink dit selectievakje aan om dit materiaal dubbelzijdig te maken.
  • Alfavermenging: Selecteer hoe de alfawaarden (transparantie) van texturen moeten worden verwerkt:
    • Ondoorzichtig: Alfawaarden worden genegeerd en de textuur is altijd volledig ondoorzichtig.
    • Vermenging: Alfawaarden tussen 0 en 1 zijn transparant.
    • Masker: Elk deel van de textuur is volledig ondoorzichtig of volledig transparant, afhankelijk van hoe de alfawaarde zich verhoudt tot de opgegeven Alfagrenswaarde. Alfawaarden die hoger zijn dan de grenswaarde worden verwerkt als ondoorzichtig.

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.

 Presentatie

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.

  • Afbeelding: Selecteer een sferische afbeelding in HDR-indeling die u wilt gebruiken. Kan worden gebonden aan dynamische gegevens.
  • Belichting: Het belichtingsniveau.
  • Intensiteit van schaduwen: De ondoorzichtigheid van schaduwen.
  • Zachtheid van schaduwen: De wazigheid van schaduwen.

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.

  • Standaard: Selecteer een bestaande animatie die u als standaard wilt gebruiken.
  • Automatisch afspelen: Vink dit selectievakje aan om de standaardanimatie af te spelen als de component wordt geladen.
  • Animatielimiet instellen: Vink dit selectievakje aan en geef het aantal seconden op dat de animatie moet worden afgespeeld voordat de game automatisch wordt onderbroken.

 Camera

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.

  • Gieren: Hoeveel de camera rond een verticale as wordt gedraaid, in graden.
  • Stampen: Hoeveel de camera rond een horizontale as wordt gedraaid, in graden.
  • Zoomen: Hoe dichtbij de camera het model in beeld heeft.
  • Huidige gebruiken als eerste: Klik op deze knop als u de cameraweergave heeft aangepast in het voorbeeld van de 3D-editor en de huidige cameraweergave als eerste cameraweergave wilt gebruiken.

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.

  • X: De x-positie van het draaipunt.
  • Y: De y-positie van het draaipunt.
  • Z: De z-positie van het draaipunt.
  • Resetten: De standaard coördinaten van het draaipunt herstellen.

Gezichtsveld

Het verticale gezichtsveld van de camera.

  • Hoek: Een hoek tussen 1° en 179°.
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.

  • Gieren (zijwaarts): Hoeveel de camera kan draaien rond een verticale as.
  • Stampen (omhoog en omlaag): Hoeveel de camera rond een horizontale as kan draaien.

Limieten voor camerazoom

  • Type: Selecteer of u beperkingen voor de zoomfunctie van de gebruiker wilt toestaan:
    • Onbeperkte camera-afstand: Geen beperkingen. Dit is de standaardselectie.
    • Beperkte camera-afstand: Stel een minimum en maximum afstandsbereik in. Het zoomniveau Min moet zijn ingesteld op een lagere waarde dan het zoomniveau Max.
    • Vaste camera-afstand: De gebruiker kan het zoomniveau niet wijzigen. Het zoomniveau Min en het zoomniveau Max moeten zijn ingesteld op dezelfde waarde.

 Hotspots

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.

  • Hotspot toevoegen: Maak een nieuwe hotspot. Nadat u deze knop heeft geselecteerd, klikt u op het punt in het 3D-model waar u de hotspot wilt instellen. U kunt de hotspot aanpassen in de volgende velden.
  • Naam: De naam van de hotspot. Klik op het icoon Verwijderen naast de naam van een hotspot om de hotspot te verwijderen.
  • Infokaart: Hiermee bepaalt u of een klik op de hotspot een infokaart activeert:
    • Geen: Er wordt geen infokaart geactiveerd.
    • Infokaart: Er wordt een infokaart geactiveerd.
  • Titel: De titel die u op de infokaart ziet. Kan worden gebonden aan dynamische gegevens.
  • Beschrijving: De tekst die u op de infokaart ziet. Kan worden gebonden aan dynamische gegevens.

Afbeelding

U kunt het uiterlijk van hotspots aanpassen door afbeeldingen op te geven voor verschillende staten. Alle hotspots maken gebruik van dezelfde reeks afbeeldingen.

  • Omhoog: De standaardafbeelding die wordt gebruikt wanneer de gebruiker geen interactie heeft met de hotspot.
  • Omlaag: De afbeelding die wordt gebruikt wanneer de gebruiker op een hotspot klikt.
  • Bij mouseover: De afbeelding die wordt gebruikt als de muisaanwijzer van de gebruiker op een hotspot wordt geplaatst.
  • Formaat: De breedte en hoogte van een hotspot.

Stijlen voor infokaarten

U kunt de weergave van de infokaart aanpassen door de kleuren in te stellen.

  • Tekenkleur: De kleur van de titel en tekst van de infokaart.
  • Achtergrondkleur: De kleur van de achtergrond van de infokaart.
  • Randkleur: De kleur van de rand van de infokaart.

Gebeurtenissen en acties

Gebeurtenissen

Gebeurtenissen 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.

Acties

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.
  • Gieren: De gierhoek in graden.
Doelwaarde voor gieren instellen Draait het model op vloeiende wijze naar de opgegeven waarde voor gieren.
  • Doelwaarde voor gieren: De hoek voor gieren in graden, tussen -360 en 360.
Doelwaarde voor stampen instellen Draait het model op vloeiende wijze naar de opgegeven waarde voor stampen (rotatie rond de lengteas).
  • Doelwaarde voor stampen: De hoek voor stampen in graden.
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.
  • Deltawaarde voor stampen: Het aantal graden dat aan de huidige waarde voor stampen moet worden toegevoegd.
Doelwaarde voor zoomen instellen Zoomt op vloeiende wijze naar het opgegeven zoomniveau.
  • Doelwaarde voor zoomen: Het zoomniveau (meter).
Doelwaarde voor zoomen verhogen Verhoogt de doelwaarde voor zoomen (meter).
  • Deltawaarde voor zoomen: Gebruik een negatieve waarde om in te zoomen.
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 draaien x : De x-positie (meter).
  • Doelwaarde voor draaien y : De y-positie (meter).
  • Doelwaarde voor draaien z : De z-positie (meter).
Doelwaarde voor lokaal meedraaien instellen Verplaatst de camera op vloeiende wijze naar een nieuwe positie.
  • Doelwaarde voor lokaal meedraaien x - (meter).
  • Doelwaarde voor lokaal meedraaien y - (meter).
Materiaalkleur instellen Stelt de materiaalkleur in.
  • Materiaalnaam
  • Rood: De roodwaarde van de nieuwe kleur (tussen 0 en 1).
  • Groen: De groenwaarde van de nieuwe kleur (tussen 0 en 1).
  • Blauw: De blauwwaarde van de nieuwe kleur (tussen 0 en 1).
Animatie afspelen Speelt de opgegeven animatie af.
  • Naam animatie
Animatie onderbreken Onderbreekt de opgegeven animatie.
  • Naam animatie
Animatietijd instellen Zoekt de opgegeven tijd tijdens een animatie.
  • Naam animatie
  • Animatietijd: De tijd die moet worden gezocht (in seconden).

Stel de component 3D-modelviewer in als ontvanger als u een van deze acties selecteert in het dialoogvenster Gebeurtenissen.

Geavanceerde API-methoden

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.

Was dit nuttig?

Hoe kunnen we dit verbeteren?

Meer hulp nodig?

Probeer de volgende stappen:

Zoeken
Zoekopdracht wissen
Zoekfunctie sluiten
Hoofdmenu
13664627758862289884
true
Zoeken in het Helpcentrum
true
true
true
true
true
5050422
false
false
false
false