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

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

Scenes

Each XR+ project is made of one or several scenes, on the basic plan your have have up to 5 scenes, but this limit is raised to 10 or more on the advanced and expert plans.

Each scene is independent, you can setup actions to switch between scenes, take a look at the bird slideshow template for an example of a multi scene project

Open template

You can activate the timeline on the scenes to setup in & out timings for each of the scene items

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

Tutorial

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

States interactions module tutorial

Web AR activity statistics

With this Screen you can find all statistics about views and interactions with your project in Statistics.

The First Row is displaying the views by date. You can know if it’s on AR, VR or embed mode views.

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 by date interval.

White label branding

To remove XR.+ branding visual elements, check this list (business plan only):

In your project:

  • Use a custom AR tracking image (marker)
  • Embed the project from an external website
  • On the ‘screens’ tab, tick the Skip the ‘This is an augmented reality experience for mobile’ screen option
  • Create an AR player and assign it to your project

In your AR player:

  • Set a custom logo
  • Customize the loading screens
  • Customize the about screen
  • Customize the AR help screen

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 project