March 16, 2023
With the photo & video module, users can make photos & record videos of their experience.
March 7, 2023
You can import .obj, .fbx and .glb (compressed gltf) 3D models up to 12 MB.
The 3D models can be animated.
We recommend importing 3D models with less than 100 000 triangle faces (polygons).
When importing a:
.obj model : neither textures nor animations are included
.fbx model : animations are included but not textures
.glb model : animations and textures are included
October 12, 2022
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
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
Expand the project functionalities with the XR+ front-end javascript & CSS API module (advanced javascript knowledge recommended)
Contact us for more infos
September 10, 2022
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.
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
Those libraires are loaded by all projects and ready to use with the API:
considering: var XRAPI = new XRAPI_V1({});
| XRAPI.getIsLibraryLoaded(); | check if project library is fully loaded | boolean |
| XRAPI.getIsStarted(); | check if experience already started | boolean |
| XRAPI.getThreejsScene(); | get threejs scene | threejs scene |
| XRAPI.getCompositionItemByName(“my item name”); | get a composition item threejs root object by its name | threejs object |
| XRAPI.getCompositionParent(); | get parent off all threejs objects on the scene | threejs object |
| XRAPI.getDesktopScreenDomElement(); | get web dom element: desktop screen | dom element |
| XRAPI.getLoadingScreenDomElement(); | get web dom element: loading screen | dom element |
| XRAPI.getStartScreenDomElement(); | get web dom element: start screen | dom element |
| XRAPI.getMainScreenDomElement(); | get web dom element: main screen | dom 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 |
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: contactus@xr.plus
April 21, 2021
Each XR+ project is made of one or several scenes, on the basic plan your have have up to 5 scenes.
Each scene is independent, you can setup actions to switch between scenes, take a look at the bird slideshow template as a multi scenes project example.
Open multi scenes project template
Activate the timeline on a scene to setup in & out timings for each of its items
Each scene can have an overlay linked to it. An overlay is an extra layer of UI elements like buttons, shapes, or images. Overlays can be simply decorative or used to trigger interactions.
You can set the starting user position when doing 3DOF or 6DOF tracking on computer and headset.
In the composition, the starting user position is displayed as a semi transparent ghost, either a bust or a full body silhouette.
You can set a global scale for each device, so that an item can be small on mobile, but much larger on headset.
January 21, 2023
An overlay is an extra layer of UI elements such as buttons, images, rectangle.
Overlays can be simply decorative or used to trigger interactions. Each scene can have an overlay linked to it.
Overlays can contain:
• rectangle shapes
• text
• images
• buttons
• photo & video module buttons
View overlays project template example
to create and edit overlays, go to the ‘Scenes overlays’ section on the left column menu.
Left column:
Middle column:
This is overlay preview, use the tabs at the top to switch between the mobile and the computer preview
Right column:
edit properties of the selected overlay item:
January 20, 2023
With actions, you can add interactions to your projects
Actions can be added to:
Only available in the states engine:
If you need to trigger multiple actions at once like: change scene, then hide an item, then wait 3s, then change overlay… Then use a state from the states engine
April 29, 2021
(formerly ‘advanced interactions’ module)
Complex actions sequences can be made with the ‘States engine‘, by switching between states.
A state is made of one or several actions. Use states when you need to trigger multiple actions at once like: change scene, then hide an item, then wait 3 seconds, then change overlay…
When a project switches to a new state, all actions from the new state are applied in a top to bottom order.
There are many different actions, such as:
change scene, change overlay, hide / show an item, play an animation, play a sound effect, change a color.
See ‘actions’ section for the full list of all available XR+ studio actions.
Tip: multiple states can be chained with a timer action, to switch to another state after a fixed amount of time.
You can follow this step by step tutorial to practice using the states engine