aframe-xr

System & components to build WebXR experiences with A-frame

Running the examples

Install npm and then run the following:

$ npm install
$ npm start

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

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

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

Based on the vr-mode-ui component

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

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>

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