Composant "Outil de visualisation du modèle 3D" et éditeur 3D

Ce composant n'est pas compatible avec les annonces Google Ads, Google AdMob, AMP HTML, vidéo ni illustrées.

Le composant "Outil de visualisation du modèle 3D" vous permet d'intégrer dans votre annonce un modèle 3D au format GLB avec lequel les utilisateurs peuvent interagir (rotation, panoramique ou zoom). Vous pouvez également le configurer dans l'éditeur 3D de Google Web Designer.

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

Compatibilité avec les navigateurs

Microsoft Edge n'est pas compatible avec le composant "Outil de visualisation du modèle 3D".

Pour ajouter le composant "Outil de visualisation du modèle 3D" à votre projet, procédez comme suit :

1. Ouvrez le panneau Composants, puis le dossier Éléments graphiques et effets.
2. Faites glisser le composant Outil de visualisation du modèle 3D dans l'espace de création.
3. Dans la section Outil de visualisation du modèle 3D du panneau Propriétés, indiquez le fichier GLB que vous souhaitez utiliser comme source. Cliquez sur le bouton Parcourir  pour sélectionner un fichier dans votre système de fichiers.
4. Double-cliquez sur le composant dans l'espace de création pour ouvrir la boîte de dialogue de l'éditeur 3D et configurer le modèle. Lorsque vous avez terminé, cliquez sur Enregistrer.

Vous pouvez ajuster vos préférences Google Web Designer (Édition > Préférences > Composants) de manière à créer automatiquement un composant "Outil de visualisation du modèle 3D" lorsque vous faites glisser un fichier GLB dans l'espace de création.

Propriétés

Les propriétés du composant sont affichées dans le panneau "Propriétés". (Vous devez quitter l'éditeur 3D.)

Propriété	Description
Nom	Nom du composant "Outil de visualisation du modèle 3D".
Source	Fichier source au format GLB de l'élément 3D. La taille du fichier d'un élément doit être inférieure ou égale à 3 Mo. Consultez le guide de conception pour les éléments 3D pour obtenir des consignes supplémentaires. Utilisez l'outil de validation glTF Khronos pour vous assurer que votre fichier GLB est valide.

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.

Éditeur 3D

Pour ouvrir la boîte de dialogue de l'éditeur 3D :

• Double-cliquez sur le composant "Outil de visualisation du modèle 3D" dans l'espace de création.

Un aperçu du modèle 3D s'affiche. Vous pouvez le faire pivoter et effectuer un zoom. Vous pouvez également interagir avec toutes les zones cliquables.

Configurez le modèle à l'aide du panneau de droite. Les configurations sont classées dans deux onglets principaux : GLB et Composant.

Onglet "GLB"

Les modifications apportées dans l'onglet GLB sont enregistrées dans le fichier source du modèle dans le dossier des éléments. Celles-ci incluent les fichiers image utilisés comme textures et qui seront regroupés dans le fichier GLB. Vous pouvez définir vos préférences Google Web Designer de manière à supprimer automatiquement les textures inutilisées.

Informations concernant le fichier GLB
Source	Fichier source au format GLB du modèle 3D. Ce champ est en lecture seule. Pour changer de fichier source, quittez la boîte de dialogue de l'éditeur 3D, puis modifiez la propriété Source du composant dans le panneau Propriétés.
Détails	Taille : taille du fichier source.
Matières
Matières	Vous ne pouvez configurer qu'une matière à la fois. Sélectionnée : cette liste déroulante répertorie toutes les matières utilisées dans le modèle 3D. Sélectionnez la matière que vous souhaitez afficher ou modifier.
Couleur de base	Couleur et texture à utiliser au départ pour la matière actuelle.
Métallique/Rugosité	Les propriétés "Métallique" et "Rugosité" permettent de déterminer la façon dont la matière reflète la lumière. Texture : sélectionnez une texture pour indiquer les parties métalliques de la matière. Métallique : valeur comprise entre 0 et 1 indiquant à quel point la matière est métallique. Plus la matière est métallique plus elle reflète l'environnement. Rugosité : valeur comprise entre 0 et 1 indiquant à quel point la matière est mate. Cette propriété a une incidence sur la netteté des reflets. La valeur 0 correspond à une surface complètement réfléchissante et 1 à une surface complètement mate.
Carte normale	Sélectionnez une texture pour ajouter des bosses et des détails à la surface de la matière.
Émissive	Sélectionnez une couleur et une texture pour représenter la brillance de la matière.
Occlusion	Sélectionnez une texture pour représenter les ombres de la luminosité ambiante.
Autre	Définissez des options supplémentaires pour la matière : Double face : cochez cette case pour que cette matière comporte deux côtés. Fondu alpha : indiquez la façon dont les valeurs alpha (transparence) des textures doivent être traitées : Opaque : les valeurs alpha sont ignorées, et la texture est toujours complètement opaque. Fondu : les valeurs alpha comprises entre 0 et 1 sont translucides. Masque : chaque partie de la texture est soit complètement opaque, soit complètement transparente, en fonction du rapport entre sa valeur alpha et la valeur Coupure alpha spécifiée. Les valeurs alpha supérieures à la coupure sont considérées comme opaques.

Onglet "Composant"

Les modifications apportées dans l'onglet Composant sont reflétées dans le composant "Outil de visualisation du modèle 3D" et non dans le fichier source au format GLB sous-jacent.

Fichiers HDR

Vous pouvez utiliser des fichiers image HDR (High Dynamic Range) pour l'arrière-plan et l'environnement d'éclairage dans le composant "Outil de visualisation du modèle 3D". La taille de chaque fichier HDR doit être inférieure à 150 Ko Nous vous recommandons de redimensionner les fichiers HDR volumineux au format 256 x 128 afin qu'ils respectent cette limite.

Présentation
Arrière-plan	Image : sélectionnez une image ou un environnement (un fichier HDR) à utiliser comme arrière-plan. Cette propriété peut être associée à des données dynamiques.
Luminosité de l'environnement (HDR)	Vous pouvez utiliser la luminosité basée sur l'image pour obtenir une luminosité détaillée basée sur un environnement réel. Image : sélectionnez une image sphérique au format HDR à utiliser. Cette propriété peut être associée à des données dynamiques. Exposition : niveau d'exposition à la lumière. Intensité des ombres : niveau d'opacité des ombres. Douceur des ombres : niveau de flou des ombres.
Animations	Si le fichier source au format GLB contient des animations, vous pouvez faire en sorte qu'une animation soit lue automatiquement. Pour le moment, l'éditeur 3D ne permet pas de créer des animations. Par défaut : sélectionnez une animation existante à utiliser par défaut. Lecture automatique : cochez cette case pour lancer la lecture de l'animation par défaut lors du chargement du composant. Définir la durée maximale de l'animation : cochez cette case, puis indiquez la durée (en secondes) de lecture de l'animation avant sa mise en pause automatique.
Caméra
Vue initiale de la caméra	La vue initiale de la caméra détermine les paramètres de la caméra lors du chargement du composant. Si vous définissez des limites de rotation et de zoom pour la caméra dans les champs suivants, celles-ci sont appliquées. Rotation : degré de rotation de la caméra autour d'un axe vertical, en degrés. Inclinaison : degré de rotation de la caméra autour d'un axe horizontal, en degrés. Zoom : distance entre la vue de la caméra et le modèle. Utiliser les paramètres actuels en tant que commandes initiales : cliquez sur ce bouton si vous avez ajusté la vue de la caméra dans l'aperçu de la boîte de dialogue de l'éditeur 3D et que vous souhaitez utiliser la vue actuelle comme vue initiale pour la caméra.
Pivotement en orbite	Le pivotement en orbite désigne le point dans l'espace 3D autour duquel la caméra pivote. Par défaut, il est défini sur le centre du modèle 3D. X : position X du point de pivotement en orbite. Y : position Y du point de pivotement en orbite. Z : position Z du point de pivotement en orbite. Réinitialiser : cette option permet de restaurer les coordonnées par défaut du point de pivotement en orbite.
Champ de vision	Champ de vision vertical de la caméra. Angle : angle compris entre 1° et 179°.
Limites de rotation de la caméra	Si vous souhaitez limiter le degré de rotation du modèle, cochez les cases Rotation ou Inclinaison, puis définissez les angles minimal et maximal. Rotation (latérale) : degré de rotation de la caméra autour d'un axe vertical. Inclinaison (vers le haut et vers le bas) : degré de rotation de la caméra autour d'un axe horizontal.
Limites de zoom de la caméra	Type : indiquez si vous souhaitez limiter le niveau de zoom que les utilisateurs peuvent appliquer. Les options disponibles sont les suivantes : Distance de la caméra illimitée : aucune restriction. Il s'agit de l'option définie par défaut. Distance de la caméra limitée : définissez une distance minimale et une distance maximale. La valeur du niveau de zoom Min doit être inférieure à celle du niveau de zoom Max. Distance de la caméra fixe : l'utilisateur ne peut pas modifier le niveau de zoom. La valeur des niveaux de zoom Min et Max doit être identique.
Zones cliquables
Zones cliquables	Les zones cliquables sont des points du modèle 3D avec lesquels les utilisateurs peuvent interagir. Vous pouvez afficher des fiches info ou configurer des événements à déclencher en cas de clic sur une zone cliquable. Ajouter une zone cliquable : créez une zone cliquable. Après avoir sélectionné ce bouton, cliquez sur le point du modèle 3D où vous souhaitez définir la zone cliquable. Vous pouvez personnaliser la zone cliquable à l'aide des champs suivants. Nom : nom de la zone cliquable. Cliquez sur l'icône Supprimer  à côté du nom d'une zone cliquable pour la supprimer. Fiche info : permet d'indiquer si un clic sur la zone cliquable déclenche l'affichage d'une fiche info. Les options disponibles sont les suivantes : Aucune : aucune fiche info n'est appelée. Fiche info : une fiche info est appelée. Titre : titre affiché sur la fiche info. Cette propriété peut être associée à des données dynamiques. Description : texte affiché sur la fiche info. Cette propriété peut être associée à des données dynamiques.
Image	Vous pouvez personnaliser l'apparence des zones cliquables en spécifiant des images correspondant à différents états. Toutes les zones cliquables utilisent le même ensemble d'images. Image du haut : image utilisée par défaut lorsque l'utilisateur n'interagit pas avec la zone cliquable. Image du bas : image utilisée lorsque l'utilisateur clique sur une zone cliquable. Image superposée : image utilisée lorsque l'utilisateur passe la souris sur une zone cliquable. Taille : largeur et hauteur d'une zone cliquable.
Styles de fiches info	Personnalisez l'apparence de la fiche info en définissant ses couleurs. Couleur de la police : couleur du titre et du texte de la fiche info. Couleur de l'arrière-plan : couleur de l'arrière-plan de la fiche info. Couleur de la bordure : couleur de la bordure de la fiche info.

Événements et actions

Événements

Les événements permettent de déclencher d'autres actions dans votre annonce. Le composant "Outil de visualisation du modèle 3D" envoie les événements suivants :

Événement	Description
Scène 3D 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 la caméra 3D est modifiée. Si l'utilisateur ajuste les propriétés de la caméra, l'objet event.detail contient la propriété source: user-interaction.
Clic sur la zone cliquable	Envoyé lorsqu'un clic est enregistré sur une zone cliquable définie dans l'éditeur 3D. 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 "Outil de visualisation du modèle 3D" en tant que cible.

Actions

Les actions suivantes du composant "Outil de visualisation du modèle 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).

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

Méthodes avancées ayant recours à l'API

Une méthode supplémentaire, consistant à utiliser du code personnalisé, est disponible.

getCameraDetails()

Renvoie un objet contenant des informations sur les paramètres actuels de la caméra.

Propriétés de l'objet renvoyé :

• yaw : degré de rotation autour de l'axe vertical, en degrés.
• pitch : degré de rotation autour de l'axe horizontal, en degrés.
• zoom : niveau de zoom, en mètres.
• x : position X du point de pivotement de la caméra, en mètres.
• y : position Y du point de pivotement de la caméra, en mètres.
• z : position Z du point de pivotement de la caméra, en mètres.

Les utilisateurs avancés peuvent également consulter la documentation à l'adresse https://modelviewer.dev.

Aperçu

Vous pouvez prévisualiser le composant "Outil de visualisation du modèle 3D" uniquement dans l'éditeur 3D ou dans le navigateur en cliquant sur le bouton Aperçu en haut à droite.