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');