aframe-xr
aframe-xr copied to clipboard
Published
20 hours ago •
mozilla
mozilla
System / Components to build WebXR experiences with A-frame
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');
mozilla