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; }
Puis, dans le champ Classe de l'image 3D, entrez my-image. Cela fait référence au contenu ajouté dans > .
|
||
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
|
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.
|
|
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; } |