Virtual reality – Create interactions!

In this tutorial, you are going to learn how to change an item’s aspect when clicked and create an interaction. For a better understanding, let’s see an example:

• In the scene, there is an elevator and a button
• This button can be gray (stop) or green (call)
• When clicked, the gray button turns green

For this example, you will need two images. 

Main steps

Here are the steps to follow:

• Enrich the panorama by adding an image item
• Define the image item’s properties (aspects and states)
• Create interactions (using conditionals)

Step 1 – Enrich the panorama

Add the image item in the scene

• Click on the “Item adding list”
• Click on the image item and drag it into the scene (see screenshot below)
• Find it in the right column

• Rename the image as a “Button”, by double-clicking on the word “Image”. You will find it more easily among the other items added.

Step 2 – Define the item’s properties

For this step, you are going to define the item’s properties, aspects and states. In the right column, select your item and access the item or group’s properties by clicking on  .

Define the item’s aspects

An image item’s aspect is a visual (graphic) representation of it. In this example, the button item has two possible aspects: red or green.

Initial aspect (with a full flag)

• First click on
• In this menu, rename the initial aspect “off”
• Associate an image (the red button) with this aspect by clicking on the button “Define a media”

Secondary aspect (with an empty flag)

• Create a second aspect
• Rename it “on”
• Add an image (the green button) to this aspect

Configure the item’s state

For an image item, a state is defined by three characteristics:

• Its visibility,
• Its interactivity
• Its highlighting

Depending on the scenario planned, one item can have several states. For example, an image item can be “invisible” at the beginning of the experience and become visible and interactive (clickable). In this example, the item has only one state throughout the experience: “Visible” and “Interactive” (clickable).

Click on .

In this new menu, the states available can be changed:

Remember to give this state a meaningful name to find it more easily if needed. Then go back to the main menu from the right column using the arrow at the top left corner.

Step 3 – Create interactions using conditionals

Conditionals allow you to interact with your experience’s items by defining conditions and consequences. For example: if you click on the red button, then it will become green.

Change the item’s initial aspect

In this example, when the image item is clicked, it goes from “stop” aspect (red) to “call” aspect (green), as if you pressed an elevator button.

• Open the window “Conditionals”, the pictogram at the top of the toolbar 

• In this new menu, add a new conditional by clicking on the symbol “+” 

Define the condition and then the consequence (see screenshot below)

• When the “button” is clicked, then it changes aspect and becomes “on”. In condition, specify that this action can be triggered only “if the aspect is “off”.
• Duplicate this conditional and reverse the last terms: When the “button” is clicked, then it changes aspect and becomes “stop”. In condition, specify that this action can be triggered only if the aspect is “on”.

Now it’s your turn! Share your comments and questions with us!

See you soon for the next tutorial! 🙂