How To: Create Interactions In Virtual Reality

In this tutorial, you will learn how to change the aspect of an element by clicking on it. To better understand, let’s use an example:

• In the scene, there is an elevator and a button
• This button can be either grey (stop) or green (functioning)
• When user clicks, the button goes from grey to green

To create this example, you will need two images. By clicking on this link, you will find more information on which formats are compatible with Speedernet Sphere.

Main steps

Here are the steps to follow:

• Enrich the panorama by adding an image element
• Define the properties of the image element (aspects and states)
• Create interactions (with conditionals)

Step 1 – Enrich the panorama

Add the image element into the scene

• Click on the “add element list”
• Click on the image element and drop it onto the scene
• Rename it in the Elements column (“button”). It will make it easier to identify it in the list.

Step 2 – Define the properties of the element

In this step, you will define the properties of the element, its aspects and states. Click on “Go to the properties of the element or group”  .

Define the aspects of the element

The aspect of an image element is its visual representation. In this example, the “Flag” element has two possible aspects: blue and green.

Initial aspect

• Rename the initial aspect “flag1”
• Associate an image (the button is blue) to this aspect by clicking on the “add an image” button

Secondary aspect

• Create a second aspect by clicking on the “+” symbol
• Rename this aspect “flag2”
• Add an image (the button is green) to this aspect

Configurate the state of the element

For an image element, a state is defined by two characteristics:

• Its visibility
• Its interactivity

Depending on your scenario, you can have several states for an element. For example, an image element can be “invisible” at the start of the experience and can later become visible and interactive (clickable). In this example, the element has only one state throughout the experience: “visible” and “interactive” (clickable). Remember to give an appropriate name to the state so it’s easier to identify it when necessary. Then, close the properties window.

Step 3 – Create interactions with conditionals

Conditionals enable the user to interact with the elements in an experience by defining conditions and consequences. For example: if the user clicks on the blue button, then the button becomes green.

Change the initial aspect of the element

In this example, when the user clicks on the image element, the latter changes from aspect “flag1” (blue) to aspect “flag2” (green).

• Open the conditionals window
• Add a new conditional by clicking on the “+” symbol
• Define the condition and then the consequence

If user clicks on “flag1” Then this image changes aspect and becomes “flag2”

• Close the conditionals window and test the experience

Interested in learning how to make this button interact?

If so, we invite you to click on the link below to read the tutorial “Go further: interactivity in virtual reality”.

Your turn now to have fun with Sphere. Leave your comments and questions below!

See you soon for another tutorial!