Utilisation des widgets > 3D > Etiquette 3D
  
Etiquette 3D
A quoi sert ce widget ?
Le widget Etiquette 3D vous permet d'afficher des informations sur vos modèles 3D.
Quand faut-il utiliser ce widget ?
Utilisez une étiquette 3D lorsque vous souhaitez inclure du texte sur le canevas 3D d'une expérience de réalité augmentée. L'étiquette 3D peut être composée d'un ou deux mots, ou d'un texte plus long si besoin.
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
Texte
text
string
Texte affiché sur le widget.
Hauteur
height
number
Hauteur de l'en-tête. Par défaut, ce paramètre est défini sur 0,05 (ou lorsque le champ est vide).
Largeur
width
number
Largeur de l'en-tête.
Classe
class
string
Classe attribuée au widget.
Les propriétés CSS suivantes sont actuellement prises en charge :
font-family : définit la famille de polices
color : définit la couleur de police/remplissage
--text-stroke-color : semblable à color, mais permet de définir la couleur de trait de la police
--text-stroke-width : définit la largeur du trait
font-weight : définit le poids ou l'épaisseur de la police
font-style
 : définit le style de la police (normal, italique, oblique, etc.)
background-color : définit la couleur de remplissage de l'étiquette
text-decoration : prend en charge le soulignement
border-color : définit la couleur du bord de l'étiquette
border-radius : arrondit les coins du bord de l'image
border-style : définit le style du bord de l'étiquette
border-width : définit la largeur du contour du bord de l'étiquette
border : combine border-color, border-style et border-width
padding : applique le remplissage à l'extérieur du texte de l'étiquette
Par exemple, dans le volet PROJET, sous STYLES, cliquez sur Application et entrez les informations suivantes dans l'éditeur :
.my-label {
font-family: Century Gothic;
color: black;
--text-stroke-color: yellow;
--text-stroke-width: 3px;
font-weight: normal;
font-style: italic;
background-color: grey
}
* 
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'étiquette 3D, entrez my-label. Cela fait référence au contenu ajouté dans Styles > Application.
Activer mise en forme basée sur l'état
enableStateFormatting
boolean
Permet de mettre en forme le widget en fonction des définitions d'état qui ont été définies dans ThingWorx.
Si la case à cocher est sélectionnée, les propriétés suivantes s'affichent :
Champ dépendant
Définition d'état
Par exemple, si la définition d'état de l'étiquette 3D a la valeur error, l'étiquette devient rouge.
Pour plus d'informations sur les définitions des styles et des états dans ThingWorx, consultez la rubrique Définitions des styles et des états dans le Centre d'aide ThingWorx.
Champ dépendant
stateFormatValue
string
Cette propriété est visible si la case Activer formatage basé sur l'état est cochée. Pour plus d'informations sur les définitions des styles et des états dans ThingWorx, consultez la rubrique Définitions des styles et des états dans le Centre d'aide ThingWorx.
Définition d'état
stateFormat
boolean
Cette propriété est visible si la case Activer formatage basé sur l'état est cochée. Pour plus d'informations sur les définitions des styles et des états dans ThingWorx, consultez la rubrique Définitions des styles et des états dans le Centre d'aide ThingWorx.
Famille de polices
fontFamily
string
Style de la police. Entrez une famille de polices valide comme Arial, Times New Roman, Century Gothic, etc. Par défaut, la police est Arial.
Couleur de la police
fontColor
string
Couleur de la police. Entrez un nom de couleur, le code hexadécimal ou la valeur RVBA. Par exemple, si vous souhaitez que la couleur de police soit rouge, vous pouvez entrer les éléments suivants :
red
#FF0000
rgba(255, 0, 0, 1)
Par défaut, ce paramètre est défini sur "black".
Couleur de contour de police
fontOutlineColor
string
Couleur du contour de la police. Entrez un nom de couleur, le code hexadécimal ou la valeur RVBA. Par exemple, si vous souhaitez que le contour de l'étiquette soit rouge, vous pouvez entrer les éléments suivants :
red
#FF0000
rgba(255, 0, 0, 1)
Par défaut, ce paramètre est défini sur "white".
Echelle
scale
string
Echelle de l'étiquette.
Coordonnée X
x
number
Emplacement de l'étiquette sur l'axe X.
Coordonnée Y
y
number
Emplacement de l'étiquette sur l'axe Y.
Coordonnée Z
z
number
Emplacement de l'étiquette sur l'axe Z.
Rotation X
rx
number
Rotation de l'étiquette autour de l'axe X.
Rotation Y
ry
number
Rotation de l'étiquette autour de l'axe Y.
Rotation Z
rz
number
Rotation de l'étiquette 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 jamais masquée par d'autres augmentations. Généralement, ce paramètre peut être utilisé pour les étiquettes ou capteurs qui doivent toujours rester visibles.
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
number
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. Entrez le texte que vous souhaitez afficher dans le champ Texte, ou liez une propriété de données dans le champ Texte du widget.
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-3DLabel {
font-family: Century Gothic;
color: black;
--text-stroke-color: yellow;
--text-stroke-width: 3px; /*csslint ignore*/
font-weight: normal;
font-style: italic;
background-color: grey
}
Pour plus d'informations sur l'implémentation des classes CSS, consultez la rubrique Styles d'application.