Utilisation des widgets > 3D > Image 3D
  
Image 3D
A quoi sert ce widget ?
Le widget Image 3D vous permet d'insérer une image 3D sur le canevas 3D d'une expérience de réalité augmentée. Les formats de fichier pris en charge sont les suivants :
.png
.jpg, .jpeg
.svg
.gif
.bmp
Quand faut-il utiliser ce widget ?
Utilisez le widget Image lorsque vous souhaitez afficher des images ou du contenu graphique 3D pour l'utilisateur. Par exemple, si vous tentez de décrire à quoi ressemble un filtre à air sale à un technicien de maintenance, vous pouvez simplement inclure une image d'un filtre à air sale.
Comporte-t-il des propriétés, services, événements ou actions spéciaux ?
Pour afficher la liste des propriétés, services et événements communs des widgets, consultez la rubrique Propriétés, services et événements communs à plusieurs widgets.
Le tableau suivant comporte une liste des propriétés spécifiques à ce widget.
Propriété
JavaScript
Type
Description
Ressource
src
string
Ressource utilisée pour l'image 3D.
Pour inclure une image, vous pouvez effectuer l'une des opérations suivantes :
Cliquez sur en regard du champ pour ajouter un nouveau fichier image.
Entrez ou copiez et collez une URL d'image directement dans le champ.
Sélectionnez une image dans le menu déroulant.
Hauteur
height
number
Hauteur de l'image 3D en mètres. La valeur minimale est 0.04 mètres.
Largeur
width
number
Largeur de l'image 3D en mètres. La valeur minimale est 0.04 mètres.
Classe
class
string
Classe attribuée au widget.
Les propriétés CSS suivantes sont actuellement prises en charge :
background-color : définit la couleur de remplissage de l'image
border-color : définit la couleur du bord de l'image
border-style : définit le style du bord de l'image
border-radius : arrondit les coins du bord de l'image
border-width : définit la largeur de trait du contour du bord de l'image
border : combine border-color, border-style et border-width
padding : applique le remplissage à l'extérieur de l'image
Par exemple, dans le volet PROJET, sous STYLES, cliquez sur Application et entrez les informations suivantes dans l'éditeur :
.my-image {
border-color: black;
border-style: solid;
border-radius: 5px;
border-width: 3px;
background-color: white
padding: 25px 15px 25px 40px;
}
* 
Les couleurs spécifiées doivent être des couleurs CSS. Si vous n'êtes pas sûr de savoir quelles couleurs CSS sont disponibles, vous pouvez effectuer une recherche sur Internet avec les termes "Couleurs CSS".
Puis, dans le champ Classe de l'image 3D, entrez my-image. Cela fait référence au contenu ajouté dans Styles > Application.
Echelle
scale
string
Echelle de l'image 3D.
Coordonnée X
x
number
Position de l'image sur l'axe X.
Coordonnée Y
y
number
Position de l'image sur l'axe Y.
Coordonnée Z
z
number
Position de l'image sur l'axe Z.
Rotation X
rz
number
Rotation de l'image autour de l'axe X.
Rotation Y
ry
number
Rotation de l'image autour de l'axe Y.
Rotation Z
rz
number
Rotation de l'image autour de l'axe Z.
Panneau d'affichage
billboard
boolean
Rotation d'un widget autour de son centre, afin qu'il fasse toujours face à l'utilisateur. Il est aligné sur l'écran.
Occlusion
occlude
boolean
Si elle est activée, la géométrie d'un widget est invisible, mais elle masque également toute autre augmentation se trouvant derrière elle dans la scène 3D.
Par conséquent, l'arrière-plan ou le flux de caméra s'affiche à l'emplacement où le widget obstrué devrait se trouver. Cela peut servir à mettre en évidence certaines augmentations en masquant la géométrie 3D qui se trouve à proximité.
Toujours visible
decal
boolean
Superpose la géométrie de widgets aux autres augmentations de la scène, quelle que soit sa profondeur dans la scène 3D. Si la valeur configurée est Oui, elle n'est pas masquée par d'autres augmentations.
Opacité (1 Opaque - 0 Transparent)
opacity
number
Nombre compris entre 0 et 1 qui contrôle le niveau de transparence de l'objet. 0 = complètement transparent et 1 = complètement opaque.
Pivot
pivot
boolean
Détermine le point pivot de l'image :
En haut à gauche
En haut au centre
En haut à droite
Au milieu à gauche
Au milieu au centre
Au milieu à droite
En bas à gauche
En bas au centre
En bas à droite
Fonctionnement du widget
Voici un exemple de ce à quoi peut ressembler votre widget !
Etapes minimales requise pour l'utilisation
Apparence
1. Faites glisser et déposez un widget Image 3D sur le canevas.
2. (Facultatif) Sélectionnez la case à cocher de Panneau d'affichage dans le volet DETAILS.
3. Dans le champ Ressource, sélectionnez une image existante, ajouter une nouvelle image ou entrez l'URL de l'image que vous souhaitez afficher.
4. Positionnez l'image sur le canevas comme vous le souhaitez.
Styliser le widget avec CSS
Vous pouvez utiliser CSS pour styliser le widget ! Voici un exemple de classe CSS que vous pouvez créer et appliquer :
* 
Rappelez-vous qu'il est préférable de donner à vos classes des noms uniques afin qu'ils ne soient pas en conflit avec d'autres classes ou propriétés prédéfinies.
Exemple de CSS
Apparence
.ptc-3DImage {
padding: 10px;
border: 10px solid black;
border-radius: 50px;
background: green;
}
Pour plus d'informations sur l'implémentation des classes CSS, consultez la rubrique Styles d'application.