aframe-xr - GitLite

KO | EN

gitlite — search

#python #react #ai #typescript #go #android #machine-learning #linux #awesome #cli #security #pytorch #ios #open-source

aframe-xr

(★ 182)

INACTIVE - http://mzl.la/ghe-archive - System / Components to build WebXR experiences with A-frame

File Explorer

Download Latest Version (.zip)

- aframe-xr.js
- - hit-test.js
- - anchor.js
  - ar-mode-ui.js
  - reticle.js
  - xr.js
- - xr.js
- index.js
- aframe-master.js
- aframe-master.js.map
- three.xr.js
.babelrc
.gitignore
CODE_OF_CONDUCT.md
index.html
LICENSE
package-lock.json
package.json
README.md
webpack.config.js

# Installation Guide

1. Get the code

git clone https://github.com/mozilla/aframe-xr

Downloads the entire project code from GitHub to your computer.

cd aframe-xr

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

$ npm install

Downloads and installs the libraries listed in package.json.

$ npm start

Starts the development/run server.

npm install aframe-xr

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# aframe-xr

[![Version](http://img.shields.io/npm/v/aframe-xr.svg?style=flat-square)](https://npmjs.org/package/aframe-xr)
[![License](http://img.shields.io/npm/l/aframe-xr.svg?style=flat-square)](https://npmjs.org/package/aframe-xr)

System &amp; components to build [WebXR](https://github.com/mozilla/webxr-api) experiences with [A-frame](https://github.com/aframevr/aframe)

## Running the examples

Visit [this URL with all the examples](https://mozilla.github.io/aframe-xr/) or:

<a href="https://docs.npmjs.com/getting-started/installing-node">Install npm</a> and then run the following:

```
$ npm install
$ npm start
```

## Supported browsers

### AR

- ARKit: Mozilla's [ARKit based iOS app](https://github.com/mozilla/webxr-ios)
  - ARCore: Google's [WebARonARCore Android app](https://github.com/google-ar/WebARonARCore)

### VR

- Daydream: [Chrome for Android](https://webvr.rocks/chrome_for_android)
  - Gear VR: [Oculus Browser](https://webvr.rocks/oculus_browser)
  - HTC Vive / Oculus Rift: [Firefox](https://webvr.rocks/firefox)
  - Windows Mixed Reality: [Microsoft Edge](https://webvr.rocks/microsoft_edge)

## Configuration

```html
<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](https://github.com/aframevr/aframe/blob/v0.7.0/src/components/scene/vr-mode-ui.js) 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` &amp; `aframe-xr`:
```html
<script src="aframe-master.js"></script>
<script src="three.xr.js"></script>
<script src='aframe-xr.js'></script>
```

#### npm

Install via npm:

```bash
npm install aframe-xr
```

Then require and use.

```js
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`:

```json
 "dependencies": {
    "aframe": "github:aframevr/aframe#master"
  }
 ```
 
 Or reference the A-Frame included with `aframe-xr` directly:
 
 ```js
require('aframe-xr/vendor/aframe-master.js');
require('aframe-xr');
```