How to add interactions to webAR scenes?


Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on pinterest
Share on vk
Share on reddit
Share on telegram

( updated on december 2019 with new images )

Let’s learn how to add interactions to XR.+ scenes using the interactions module.

For this tutorial we’ll be using a simple 3D model made of 3 objects: a sphere, a cube and a pyramid.

This tutorial will explain how to create states and buttons to hide and show those 3 objects.

You can download the Blender file and the fbx exported to make this tutorial by clicking here.


1. Activate the module

In the modules section, turn on the ‘interactions’ module


2. The default state

For now there is only one state, the default one. This defaut state is applied as soon as the scene in loaded and ready.

States actions are applied when the scene goes into a new state.

On this first state, we’ll only show the Sphere object, to do so, we need 3 actions.

The first action will show the sphere, the second one will hide the Cube and the last one will hide the Pyramid.


3. The other states

Let’s create another state, this new state will only show the cube. Again, we need 3 actions: one for each object.

Then the the last state will show only the Pyramid, and like the other states, will hide the other 2 objects.

The 3 states now look like this, each with 3 actions:


4. Buttons

Now that we have created our 3 states add added action to each of them, we need buttons to switch between those.

We need 3 buttons: one for each states.


5. Adding buttons to states

And finally we need to add the buttons to each state so they can be used by the user


Final result

web ar interactions

XR+, the most advanced Experience Management System