Réalité Virtuelle - Créer des interactions

Dans ce tutoriel, vous allez découvrir comment changer l’aspect d’un élément au clic et créer une interaction. Pour mieux comprendre, suivons un exemple de cas :

• Dans la scène, il y a un ascenseur et un bouton.
• Ce bouton peut être d’aspect gris (arrêt) ou d’aspect vert (appel).
• Au clic, le bouton passe du gris au vert. 

Pour la réalisation de cet exemple, vous avez besoin de deux images. Sur ce lien, vous pouvez trouver des informations au sujet des formats de fichiers compatibles avec SpeedernetSphere.

Grandes étapes

Voici les étapes à suivre :

• Enrichir le panorama en ajoutant un élément de type image
• Définir les propriétés de l’élément image (aspects et états)
• Créer des interactions (à l’aide des implications)

Étape 1 - Enrichir le panorama

Ajoutez l’élément de type image dans la scène

• Cliquez sur la “Liste d’ajout d’un élément” 
• Cliquez sur l’élément image et glissez-le dans la scène (voir capture ci-contre)
• Retrouvez--le dans la colonne de droite “ ÉLÉMENTS ”

Renommez l’image en “Bouton”, en double-cliquant sur le mot “Image”. Vous le retrouverez plus facilement parmi les autres éléments qui seront ajoutés.

Étape 2 - Définir les propriétés de l’élément

Dans cette étape, vous allez définir les propriétés de l’élément, les aspects et les états. Dans la colonne de droite, sélectionnez votre élément et accédez aux propriétés de l’élément ou groupe en cliquant sur  .

Définissez les aspects de l’élément

L’aspect d’un élément de type image est une représentation visuelle (graphique) de ce dernier. Dans cet exemple, l'élément bouton a deux aspects possibles : gris et vert.

Aspect initial (celui avec un drapeau plein)

• Cliquez d’abord sur
• Dans ce menu renommez l’aspect initial "arrêt" 
• Associez une image (le bouton en gris) à cet aspect en cliquant sur le bouton “Définir un média”

Aspect secondaire (celui avec un drapeau vide)

• Créez un deuxième aspect 
• Renommez-le “appel”
• Ajoutez une image (le bouton en vert) à cet aspect

Paramétrez l’état de l’élément

Pour un élément de type image, un état se définit par trois caractéristiques :

• sa visibilité,
• son interactivité,
• sa mise en surbrillance.

Selon le scénario prévu, vous pouvez avoir plusieurs états pour un élément. Par exemple, un élément de type image peut être « invisible » au départ de l’expérience puis il peut devenir visible et interactif (cliquable). Dans cet exemple, l’élément a un seul état tout au long de l’expérience : “Visible” et “Interactif” (cliquable).

Cliquez sur

Dans ce nouveau menu, les états disponibles sont modifiables :

Pensez à donner un nom significatif à cet état pour le retrouver plus facilement si nécessaire. Revenez ensuite au menu principal de la colonne de droite en utilisant la flèche située en haut à gauche .

Étape 3 - Créer des interactions à l’aide des implications

Les implications permettent d’interagir avec les éléments d’une expérience en définissant des conditions et des conséquences. Par exemple : si vous cliquez sur le bouton rouge, alors ce dernier devient vert.

Changez l’aspect initial de l’élément

Dans cet exemple, au clic sur l’élément image, ce dernier change de l’aspect "arrêt" (rouge) à l’aspect “appel” (vert) comme si vous appuyez sur le bouton d’appel d’un ascenseur.

• Ouvrez la fenêtre des “Implications”, le pictogramme en haut de la barre d’outils

• Dans ce nouveau menu, ajoutez une nouvelle implication en cliquant sur le symbol “+” 

• Définissez la condition puis la conséquence (voir la capture ci-dessous) :
• Si clique sur le “bouton” Alors ce bouton change d’aspect et devient “appel”. En condition indiquez si l’aspect est “arrêt”.
• Dupliquez cette implication et inversez les derniers termes : Si clique sur le “bouton” Alors ce bouton change d’aspect et devient “arrêt”. En condition indiquez si l’aspect est “appel”.
  
• Fermez la fenêtre pour tester l’expérience

À vous de jouer ! Faites-nous part de vos commentaires et questions !

À très bientôt sur le prochain tutoriel !🙂