index file template

Gaming module

With the XR+ no-code gaming module, manage scoring, timers, variables, generate random values, and set conditions (if -> then).

The gaming module is the perfect tool to make web AR/ web VR mini games.

Try this game demo made with the gaming module

This module is not available on basic accounts, contact us for more details


To add a sound effect or a music to a scene, import an audio file to the library and add it to a scene.

You can use the scene timeline to delay the starting time of the audio

When leaving the scene, all audio items included in the scene are stopped.

Audio items have 2 modes: ambient and spatial

Ambient audio

Ambient audio have a constant volume

Spatial audio

Spatial audio volume depends of the distance between the user and the audio source. You can place a A spatial audio anywhere in the scene and choose its max distance, symbolised by the sphere rings.

If a user is outside of the sphere, the audio item volume will be null.

If a user is inside the sphere, the audio volume is set considering its distance to the audio position. The closer to the source, the higher the volume.

Focused spatial audio

Focused audio are only audible if the audio source is within the user field of view ( visible on screen )

Spatial audio demo

Keep and audio playing between scenes

If you need to play a sound that should not be interrupted when changing scenes, don’t add to a scene, instead, use the Play audio action from the States engine to start playing the sound

Javascript/CSS XR+ API

The XR+ javascript API let developpers add front-end functionalities that do not exist in XR+, it also allows for a deeper UI / screens customization.

How it works?

The API is a project module to enable in the studio

The API allows javascript file and CSS files to be loaded in the <body> of the project web document, with the usual <script> and <style> tags.

You must host those files, they are not hosted by XR+.

We provide a simple example – a javascript class – on how we recommend to communicate with the XR+ elements of the experience.

You can register and listen to particular events such as when the experience starts, or when an image marker is found/lost.

You can also setup your own events with the XR+ studio action editor. By doing so you can trigger an action on a composition item to call a function you have defined in your script.

download the javascript API class example

Libraries included in the core project js code

Those libraires are loaded by all projects and ready to use with the API:

Javascript reference

considering: var XRAPI = new XRAPI_V1({});

XRAPI.getIsLibraryLoaded();check if project library is fully loadedboolean
XRAPI.getIsStarted();check if experience already startedboolean
XRAPI.getThreejsScene();get threejs scenethreejs scene
XRAPI.getCompositionItemByName(“my item name”);get a composition item threejs root object by its namethreejs object
XRAPI.getCompositionParent();get parent off all threejs objects on the scenethreejs object
XRAPI.getDesktopScreenDomElement();get web dom element: desktop screendom element
XRAPI.getLoadingScreenDomElement();get web dom element: loading screendom element
XRAPI.getStartScreenDomElement();get web dom element: start screendom element
XRAPI.getMainScreenDomElement();get web dom element: main screendom element
XRAPI.goToScene(index);change scene. Use index 1 for the first scene
XRAPI.goToState(index);change state. Use index 1 for the first state
XRAPI.goToStateByUid(uid);change state. Pass state uid as parameter

Using three.js

the three.js library is currently available at the global scope ( but may only be available as a module import in future updates ).

You can use it directly this way:

const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); ...


for questions regarding the API, email us at:

Projects analytics

On the analytics section you can find all details about views, activity and interactions with your project

The First Row is displaying the amount of views by date.

The Total Actions section tells you about specific data for your experience: time, sessions and the average sessions time.

Action & events column is for interactions with events and possible interactions in your experience like taking a photo, switching to a state, scan an image tracking marker.

The cities sections is for where your experiences were viewed geographically, and the number of views filtered by cities.

All this data can be filtered by year, by month, or a date interval.

White label branding

To remove XR+ branding visual elements, check this list (advanced & expert plan only):

In the project:

  • Create a Skin and assign it to your project
  • Embed the project from an external website

In the project skin:

  • Customize the loading, start and main screens
  • If using image tracking, customize the AR help screen ( to be done in the project )

Publishing on an external website

Business users can load projects inside an external web domain within an iframe, like when adding a Youtube video player on a web page.
We provide a template to do so, no coding to do, just upload the .html file to your server.

Note: an SSL certificate (https:// …) on your web domain is required to embed projects.

Example of embed XR+ project


It is very important to optimize your projects!
Try to keep your project total size (images + models + audio files + video files) under 10Mb, or even 5Mb.

On your 3D models, do not use oversized textures, and delete all faces that are hidden.

Short loading times and a smooth framerate always make an experience more pleasant for the end user…

Loading time estimation

On the left hand column, you can see an estimation of the time required to load your project, considering the mobile network speed.

How to optimize web AR / web VR loading times

Use as less assets as possible, import them once in the assets library and add them multiple times on the composition.
Don't import oversized images => do not import a 4096x4096 image that will only be used as a small icon!

In the scenes global settings, turn on 'Progressive download', this will allow the project to start as soon as assets used in the starting scene are loaded

How to optimize web AR / web VR performances

Reduce the number of polygons in your 3D modeling software, reduce the size of each texture.
Export your 3D models as .glb and turn on compression in the export settings

Project meta data

When you share an XR+ web AR project on social medias or messaging application, a preview of the experience is displayed, here’s an example with a tweet:

The data pulled to populate tweets or other social media shared project previews consist of:

  • An image
  • A title
  • A short description

The image used is your project cover, so make sure it’s looking great!

The title and the description can be edited in the studio in ‘Publication’ > ‘Social share’.

Tips & Tricks

Did you know?

  • For more comfortable sessions in the studio, you can switch to full screen with the ‘full screen’ button in the top navigation bar
  • Right click on the composition 3D view to open a contextual menu
  • You can use the keyboard arrows to navigate in the composition 3D view
  • You can rename scenes items by double clicking on their names in the items list
  • You can rename materials by double clicking on their names in the materials list
  • You can rename overlays items by double clicking on their names in the items list

Useful keyboard shortcuts

select multiple itemsCtrl + click
select all itemsCtrl + A
position toolP or G
rotation toolR
next sceneCtrl + left arrow
previous sceneCtrl + right arrow
delete selected itemsDelete
undo last changeCtrl + Z
save projectCtrl + S
toggle assets libraryCtrl + L

Users groups

The following steps describe how to manage XR+ users groups available on the education licenses.

Once your group has been setup, go to your XR+ studio profile.
If you are the group administrator, an invitation code will be displayed. Share this code with your students so they can request to join the group.

With this code, your students can request to join the group. This is done in the student XR+ studio profile area

The group administrator can now accept or reject the request

The group administrator has access ( as read only ) to all the group members projects. They are displayed the in the ‘from your group‘ tab, in the projects area

To learn more about XR+ education licenses, contact us