index file template

Javascript & CSS API

Expand the project functionalities with the XR+ front-end javascript & CSS API module (advanced javascript knowledge recommended)

Contact us for more infos

Composition background

Add a colored layer placed at the back of the composition, the layer can be a gradient or a plain color, opaque or semi transparant

Gaze trigger

Trigger actions by pointing at composition items. When using the gaze trigger, you can trigger action without touching the screen, leaving the user hand free

Disable camera

Activate this module if the project don’t require the phone camera, ex: 360° photos/videos.

When the module is active, the experience will start without requesting/using the camera

Advanced interactions module

Interactions are made with the ‘interactions’ module, by switching between ‘states’ of the composition.

A state is made of actions, buttons can be added to it.

When a project switches to a new state, all actions from the state are applied.

There are many different actions, such as:
hide / show an object, play an animation, play a sound effect, change a color or set a timer to switch to another state after a fixed amount of time.

States actions

  • Change scene
    Switch to another scene.
  • Timer => switch to a state
    Set an timer alarm, when the alarm is triggered, you can switch to another state
  • Restart scene timeline
    Restart the current scene timeline
  • Play model animation
    Play an animation from a model that contains animations. At the end of the animation playback, you can choose to switch to another state.
  • Pause model animations
    Pause all the animations from the selected model
  • Play basic animation
    Animate a mesh from a model with a simple animation: scale up/down, pulse, rotate clockwise, rotate anticlockwise
  • Stop basic animation
    Stop all basic animation on the selected mesh

  • Play audio
    Play an audio file from the assets library
  • Stop audio(s)
    Stop the playback of an audio file
  • Play video
    Play a video from the composition
  • Pause video(s)
    Pause the selected video from the composition
  • Stop video(s)
    Stop the selected video from the composition

  • Show composition items
    Unhide the selected items from the composition
  • Hide composition items
    Hide the selected items from the composition
  • Show model meshes
    Unhide the selected meshes from the composition
  • Hide model meshes
    Hide the selected meshes from the composition
  • Display text in the footer
    Display a short text at the bottom of the screen
  • Set material
    Apply the selected material on the selected mesh
  • Set material color
    Change the color of the selected material

  • Recenter composition
    Recenter the composition in fonr of the user, only available when using floating tracking

States buttons

Buttons can be used to switch between states, or trigger an action (play sound effects, start a phone call, display a pop-up with text & image, open a webpage… )

To add a button to a state, first create a button, then add it to one or multiple states


You can follow this step by step tutorial to practice using the states interactions module

States interactions module tutorial