aframe-xr

System & components to build WebXR experiences with A-frame

Running the examples

Visit this URL with all the examples or:

Install npm and then run the following:

$ npm install
$ npm start

Supported browsers

AR

• ARKit: Mozilla's ARKit based iOS app
• ARCore: Google's WebARonARCore Android app

VR

• Daydream: Chrome for Android
• Gear VR: Oculus Browser
• HTC Vive / Oculus Rift: Firefox
• Windows Mixed Reality: Microsoft Edge

Configuration

<a-scene>
  <a-entity xr="ar: true; vr: false; magicWindow: false"></a-entity>
  <!-- ... -->
</a-scene>

Documentation

xr System

Property	Default	Description
arAutostart	true	Start AR if is the unique display available
arLightEstimate	false	Modify lights intensity with the light estimation

xr Component

Property	Default	Description
ar	true	If the entity is visible on AR mode
magicWindow	true	If the entity is visible on magic window mode
vr	true	If the entity is visible on VR mode

ar-mode-ui Component

Based on the vr-mode-ui component

Property	Default	Description
enabled	true	Whether or not to display UI related to entering AR.

Usage

Browser

Include A-Frame (for now, we are using master version - soon an official published version), followed by three.xr.js & aframe-xr:

<script src="aframe-master.js"></script>
<script src="three.xr.js"></script>
<script src='aframe-xr.js'></script>

npm

Install via npm:

npm install aframe-xr

Then require and use.

require('aframe');
require('aframe-xr');

Until A-Frame 0.8.0 is released, make sure to reference the master version of A-Frame in package.json:

 "dependencies": {
    "aframe": "github:aframevr/aframe#master"
  }

Or reference the A-Frame included with aframe-xr directly:

require('aframe-xr/vendor/aframe-master.js');
require('aframe-xr');