Utilisation des widgets > 3D > Bouton-poussoir 3D
  
Bouton-poussoir 3D
* 
Disponible uniquement dans les projets de lunettes 3D.
A quoi sert ce widget ?
Le widget Bouton-poussoir 3D vous permet d'utiliser le suivi de la main articulée sur un casque HoloLens 2. Vous pouvez également pointer du regard ou cliquer sur un bouton 3D si vous utilisez un appareil HoloLens.
Quand faut-il utiliser ce widget ?
Un bouton-poussoir 3D est extrêmement utile pour pouvoir déclencher un événement. Par exemple, un bouton-poussoir 3D peut servir à démarrer la lecture d'une séquence.
Le bouton-poussoir 3D est très utile lorsque vous visualisez l'expérience sur un casque HoloLens 2 et que vous souhaitez utiliser le suivi de la main articulée. Toutefois, le bouton-poussoir 3D peut être utilisé pour n'importe quelle action utilisateur similaire aux widgets Etiquette 3D et Image 3D.
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 qui apparaît sur le bouton.
Image
src
resource url
Pour inclure une image, vous pouvez effectuer l'une des opérations suivantes :
• Cliquez sur Suivant 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.
Les formats de fichier pris en charge sont les suivants :
• .png
• .jpg
Hauteur
height
number
Hauteur du bouton en mètres. La valeur minimale est 4 cm.
Largeur
width
number
Largeur du bouton en mètres. La valeur minimale est 4 cm.
Couleur de la police
fontColor
color
Couleur de la police. Sélectionnez une couleur dans le sélecteur de couleurs.
Coordonnée X
x
number
Position du bouton sur l'axe X.
Coordonnée Y
y
number
Position du bouton sur l'axe Y.
Coordonnée Z
z
number
Position du bouton sur l'axe Z.
Rotation X
rx
number
Rotation du bouton autour de l'axe X.
Rotation Y
ry
number
Rotation du bouton autour de l'axe Y.
Rotation Z
rz
number
Rotation du bouton autour de l'axe Z.
Couleur du bouton
color
color
Couleur du bouton. Sélectionnez une couleur dans le sélecteur de couleurs.
Visible
visible
boolean
Lorsque cette case est cochée, le widget est visible lors de l'exécution.
Désactivé
disabled
boolean
Lorsque cette case est cochée, il n'est pas possible de cliquer sur le widget.
Evénement
JavaScript
Description
Appuyé
pressed
Déclenché lorsque le bouton est appuyé. Si le bouton est désactivé, l'événement n'est pas déclenché.
Fonctionnement du widget
Voici un exemple de ce à quoi peut ressembler votre widget !
Etapes minimales requise pour l'utilisation
Apparence
* 
L'utilisation de ce widget est optimisée à l'aide d'un Panneau 3D.
1. Faites glisser et déposez un widget Panneau 3D sur le canevas.
2. Faites glisser et déposez un widget Bouton-poussoir 3D sur le canevas. Positionnez le widget à l'endroit souhaité.
* 
Une fois que vous avez fait glisser les widgets sur le canevas, vous devez les imbriquer sous le widget de panneau dans l'arborescence des VUES en les déposant sous le widget de panneau.
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. Dans cet exemple, nous avons utilisé Submit.
4. Ajoutez le code suivant à Home.js :
$scope.hidePanel = function(){
$scope.view.wdg['3DPanel-1']['visible'] = false;
$scope.view.wdg['3DPressButton-1']['visible'] = false;

}
* 
Vous devez inclure une ligne pour chaque widget imbriqué sous le Panneau 3D sous $scope.hidePanel = function(){ Dans notre exemple, nous avons inclus une image 3D, une case à cocher 3D et une étiquette 3D sur le panneau, donc les éléments suivants ont été ajoutés à Home.js :
$scope.hidePanel = function(){
$scope.view.wdg['3DPanel-1']['visible'] = false;
$scope.view.wdg['3DPressButton-1']['visible'] = false;
$scope.view.wdg['3DImage-1']['visible'] = false;
$scope.view.wdg['3DCheckbox-1']['visible'] = false;
$scope.view.wdg['3DLabel-1']['visible'] = false;

}
Cela permet de s'assurer que tous les widgets imbriqués sous le panneau sont également masqués lorsque vous cliquez sur le bouton-poussoir 3D Submit.
5. Revenez dans le volet DETAILS du Bouton-poussoir 3D et faites défiler vers le bas jusqu'à EVENEMENTS.
6. Cliquez sur JS en regard de l'événement Appuyé, puis entrez hidePanel().