Composant "Modélisation 3D"

Le composant "Outil de visualisation du modèle 3D" remplace ce composant.

Le composant "Modélisation 3D" fonctionne toujours dans les documents existants, mais ne sera plus accepté à l'avenir. À la place, nous vous recommandons d'utiliser le composant "Outil de visualisation du modèle 3D" avec le fichier GLB de votre élément 3D et d'ajouter des zones cliquables à l'aide de l'éditeur 3D. La manière dont votre modèle s'affiche peut varier.

Le composant "Modélisation 3D" vous permet d'intégrer dans votre annonce un modèle 3D Poly avec lequel l'internaute peut interagir (rotation, panoramique ou zoom).

Compatibilité

• Environnements publicitaires et types d'annonces : ce composant n'est pas compatible avec les annonces Google Ads, Google AdMob ni AMP HTML.
• Navigateurs : Microsoft Edge n'est pas compatible avec le composant "Modélisation 3D".

Pour ajouter le composant "Modélisation 3D" à votre projet :

1. Ouvrez le panneau Composants, puis le dossier Éléments graphiques et effets.
2. Faites glisser le composant Modélisation 3D vers l'espace de création.
3. Dans la section Modélisation 3D du panneau Propriétés, indiquez l'URL générée à partir de la page d'affichage Poly correspondant au modèle.

Lorsque vous fournissez une URL ou un ID valides, le composant qui figure dans l'espace de création affiche une image statique en fonction du modèle.

Propriétés

Propriété	Description
Nom	Nom du composant "Modélisation 3D".
URL	URL ou ID de l'élément 3D. Seuls les éléments hébergés dans Poly sont acceptés. La taille du fichier d'un élément doit être inférieure ou égale à 3 Mo (tel qu'indiqué dans le panneau d'informations de Poly), car le chargement des éléments plus volumineux risque d'échouer dans Google Web Designer. Reportez-vous au guide de conception pour les éléments 3D pour obtenir des consignes supplémentaires. Les URL doivent commencer par https://poly.google.com/view/. L'ID se trouve à la fin de l'URL de la page d'affichage Poly (https://poly.google.com/view/0CkCZrXqCWW, par exemple). Exemples : https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW Actualiser l'élément Pour actualiser l'élément 3D, cliquez sur le bouton Actualiser les éléments  dans le champ URL. Si aucune modification ne s'affiche, il est possible que l'élément soit toujours en cours de traitement. Attendez une minute, puis réessayez.
Arrière-plan transparent du modèle 3D	Cochez cette case si vous voulez que l'arrière-plan du composant "Modélisation 3D" soit transparent.

Propriétés avancées

Propriété	Description
Icône du repère de geste	Image à afficher sur le modèle 3D pour inviter l'utilisateur à interagir avec celui-ci. Le repère de geste se déplace légèrement pour attirer l'attention de l'utilisateur jusqu'à ce que la limite de l'animation soit atteinte. Il disparaît dès que l'utilisateur commence à interagir avec le modèle. Cette propriété peut être associée à des données dynamiques.
Texte du repère de geste	Texte à afficher sous l'icône de repère de geste. S'applique uniquement si une icône de repère de geste est spécifiée. Cette propriété peut être associée à des données dynamiques.
Définir la durée maximale de l'animation	Cochez cette case, puis définissez une durée en secondes pour l'animation du repère de geste. Cette propriété peut être associée à des données dynamiques.

Événements et actions

Événements

Les événements permettent de déclencher d'autres actions dans votre annonce. Le composant "Modélisation 3D" envoie les événements suivants :

Événement	Description
Scène affichée	Envoyé lorsque la scène du modèle 3D est affichée pour la première fois.
Appareil photo modifié	Envoyé lorsque l'une des propriétés de l'appareil photo 3D est modifiée. L'objet event.detail contient toutes les propriétés actuelles de l'appareil photo.
Clic sur la zone cliquable	Envoyé lorsqu'un clic est enregistré sur une zone cliquable définie dans l'éditeur Poly. L'objet event.detail contient des informations sur la zone cliquable en question (son nom, son index dans la liste des zones cliquables de la scène, ainsi que ses coordonnées X et Y à l'écran).
Interaction commencée	Envoyé lorsque l'internaute commence à interagir avec le modèle 3D.
Interaction terminée	Envoyé lorsque l'internaute cesse d'interagir avec le modèle 3D.

Pour sélectionner l'un de ces événements dans la boîte de dialogue "Événement", définissez le composant "Modélisation 3D" en tant que cible.

Actions

Les actions suivantes du composant "Modélisation 3D" peuvent être déclenchées en réponse à d'autres événements :

Événement	Description	Options de configuration
Définir le lacet	Modifie le modèle selon le lacet spécifié (rotation autour de l'axe vertical), puis met en pause l'animation par défaut.	Lacet : angle du lacet en degrés.
Définir le lacet cible	Fait pivoter le modèle de façon fluide selon le lacet spécifié.	Lacet cible : angle du lacet en degrés (compris entre -360 et 360).
Définir l'inclinaison cible	Fait pivoter le modèle de façon fluide selon l'inclinaison spécifiée (rotation autour de l'axe longitudinal).	Inclinaison cible : angle d'inclinaison en degrés.
Augmenter l'inclinaison cible	Fait pivoter le modèle de façon fluide selon la valeur spécifiée pour atteindre l'inclinaison cible. Si le modèle a déjà atteint cette inclinaison cible, l'action n'a aucun effet.	Écart de l'inclinaison : nombre de degrés à ajouter à l'inclinaison actuelle.
Définir le zoom cible	Fait un zoom de façon fluide pour atteindre le niveau de zoom spécifié.	Zoom cible : niveau de zoom (en mètres).
Augmenter le zoom cible	Augmente le zoom cible (en mètres).	Écart du zoom : utilisez une valeur négative pour faire un zoom avant.
Définir le pivotement cible	Modifie le point de rotation, puis déplace l'appareil photo de façon fluide vers l'emplacement à partir duquel il peut orbiter autour de ce point.	Pivotement cible X : position X (en mètres). Pivotement cible Y : position Y (en mètres). Pivotement cible Z : position Z (en mètres).
Définir le panoramique local cible	Déplace de façon fluide l'appareil photo vers une nouvelle position.	Panoramique local cible X : en mètres. Panoramique local cible Y : en mètres.
Définir la couleur de la matière	Définit la couleur de la matière.	Nom de la matière Rouge : valeur des rouges de la nouvelle couleur (comprise entre 0 et 1). Vert : valeur des verts de la nouvelle couleur (comprise entre 0 et 1). Bleu : valeur des bleus de la nouvelle couleur (comprise entre 0 et 1).
Lire l'animation	Lit l'animation spécifiée.	Nom de l'animation
Mettre l'animation en pause	Met en pause l'animation spécifiée.	Nom de l'animation
Définir l'heure de l'animation	Renvoie à un moment précis d'une animation.	Nom de l'animation Heure de l'animation : heure à rechercher (en secondes).
Viser la zone cliquable	Déplace et fait pivoter l'appareil photo pour viser la zone cliquable spécifiée (définie dans l'éditeur Poly). Cette action est expérimentale et peut ne pas toujours fonctionner comme prévu.	Nom de la zone cliquable

Lorsque vous sélectionnez l'une de ces actions dans la boîte de dialogue "Événement", définissez le composant "Modélisation 3D" en tant que destinataire.

Méthodes avancées (via l'API)

D'autres méthodes sont disponibles à l'aide de l'API de l'outil de visualisation du modèle 3D. Définissez une action personnalisée qui utilise handleMessage() en transmettant un objet contenant le nom et les paramètres de la méthode.

Exemple :

document.querySelector("gwd-3d-model").handleMessage({
name: 'animateCamera',
cameraPosition: {x: 1, y: 1, z: 1},
pivotPosition: {x: 0, y: 0, z: 0},
duration: 1
});

addHotspot()

Crée une zone cliquable à la position spécifiée.

Paramètres

• hotspotName : nom de la zone cliquable sous forme de chaîne
• x : position X sous forme de nombre décimal
• y : position Y sous forme de nombre décimal
• z : position Z sous forme de nombre décimal

animateCamera()

Déplace l'appareil photo à la position spécifiée et le dirige vers un point spécifique.

Paramètres

• cameraPosition : objet contenant les coordonnées X, Y et Z de la position dans le monde vers laquelle déplacer l'appareil photo.
• pivotPosition : objet contenant les coordonnées X, Y et Z de la position dans le monde vers laquelle l'appareil photo doit s'orienter.
• duration : durée de l'animation en millisecondes (la valeur 0 modifie instantanément l'appareil photo).

incrementAnimationTime()

Fait avancer l'animation selon le nombre de secondes spécifié.

Paramètres

• animationName : nom de l'animation sous forme de chaîne
• time : durée à ajouter en secondes

setBgColor()

Définit la couleur d'arrière-plan de l'outil de visualisation.

Paramètres

• r : valeur des rouges sous forme de nombre décimal compris entre 0 et 1
• g : valeur des verts sous forme de nombre décimal compris entre 0 et 1
• b : valeur des bleus sous forme de nombre décimal compris entre 0 et 1

setHotspotVisible()

Définit une zone cliquable de manière qu'elle soit visible ou invisible.

Paramètres

• hotspotName : nom de la zone cliquable sous forme de chaîne
• isVisible : indique si la zone cliquable est visible (sous forme de valeur booléenne)

setIblAtlas()

Définit la luminosité de l'environnement.

Paramètres

• iblUrl : URL de l'image à utiliser pour la luminosité basée sur l'image, sous forme de chaîne
• intensity : intensité lumineuse sous forme de nombre décimal compris entre 0 et 1
• roughness : rugosité sous forme de nombre décimal compris entre 0 et 1
• setBackground : indique si la luminosité doit être appliquée à l'arrière-plan sous forme de valeur booléenne

setLight()

Ajuste l'intensité de la luminosité selon la valeur spécifiée.

Paramètres

• intensity : intensité lumineuse sous forme de nombre décimal compris entre 0 et 1
• lightType : type de luminosité sous forme de chaîne (utilisez hemi pour la luminosité de l'hémisphère)

setMaterialClearCoat()

Définit la couche transparente de la matière.

Paramètres

• material : nom de la matière sous forme de chaîne
• value : quantité de couche transparente sous forme de nombre décimal compris entre 0 et 1
• roughness : rugosité sous forme de nombre décimal compris entre 0 et 1

setMaterialEmissive()

Définit la couleur d'une matière émettrice de lumière.

Paramètres

• material : nom de la matière sous forme de chaîne
• r : valeur des rouges sous forme de nombre décimal compris entre 0 et 1
• g : valeur des verts sous forme de nombre décimal compris entre 0 et 1
• b : valeur des bleus sous forme de nombre décimal compris entre 0 et 1

Aperçu

Il n'est pas possible de prévisualiser ce composant dans l'interface de Google Web Designer. Pour voir comment le composant s'exécute, prévisualisez votre document dans votre navigateur préféré en cliquant sur Aperçu  dans l'angle supérieur droit.