aframe-xr - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #go #android #rust #deep-learning #nodejs #macos #awesome #awesome-list #security #openai

aframe-xr

(★ 182)

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

파일 탐색기

최종 버전 다운로드 (.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

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd aframe-xr

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

$ npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

$ npm start

개발/실행 서버를 켭니다.

npm install aframe-xr

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 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');
```