index file template

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 cannot be 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:

  • Threejs v142 (as of 2022/09/01, we update it regulary)
  • Nanojs

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

Contact

for questions regarding the API, email us at: contactus@xr.plus

States interactions module tutorial

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

For this tutorial we’ll be using a simple 3D model file made of 3 objects (meshes): 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 from Blender to make this tutorial by clicking here.

Create a new project in the studio, and start by importing the fbx file and adding it to the composition.

1. Activate the module

In the modules section, turn on the ‘advanced 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 project is loaded and ready.

States actions are applied when a project switches into the corresponding state.

On this first state, we’ll only show the sphere and hide the cube and the pyramid, to do so, we need 2 actions.

The first action will show the sphere, the second one will hide the cube and the pyramid.

3. The other states

Let’s create another state, this new state will only show the cube. Again, we need 2 actions: one to show, another one to hide.

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 2 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.

Create a first button to switch to the state 1.

We need 3 buttons: one for each state. The second button will switch to state 2, and the third button will switch to state 3.

5. Adding buttons to states

And finally we need to add the buttons to each state so they can be visible during the experience, at the bottom of the screen.

Optional: adding some animations

We can add 3 actions to the first state to animates the objects. Choose ‘play basic animation’, select the mesh to animate and choose an animation.

Final result

Tracking modes

There are several possible webAR tracking modes in XR+ studio

Image tracking

In the image tracking mode, the composition of the experience is displayed on top of a specific image target trained and recognized by the system.

To learn more about training an image target as an AR marker, see the AR image targets section.

Surface tracking (SLAM)

With surface tracking you don’t need a specific image target, the project composition can be displayed on any flat surface using the webXR web API.

With the webXR API, you can place AR content in your environment anchored with a precise flat surface tracking and move around, that 6 degrees of freedom (6DOF).

Currently only possible on Android Chrome, Edge, and Samsung internet, on a large selection of phones.
Check list of supported phones

In cases where the webXR API is not available on the phone browser, then a 3 degrees of freedom (3DOF) fallback is used, with a simpler tracking method, but compatible with absolutely all cases.

Fixed tracking

With the fixed tracking mode, the AR composition for your project is always visible, centered in the middle of the phone screen.

Face tracking

Add accessories to people faces, with the help of the studio mannequin head, place items on their correct position.

Test webAR face tracking demo