# aframe-ar

> Basic A-Frame support for the new three.ar.js library and WebARonARKit/Core browsers, as well as WebXR Viewer.

Latest version **0.2.1-a** (published 2018-03-23) · MPL-2.0 license · 0 weekly downloads

## Install

```sh
npm install aframe-ar
pnpm add aframe-ar
yarn add aframe-ar
bun add aframe-ar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1-a |
| Published | 2018-03-23 |
| First published | 2018-03-23 |
| Weekly downloads | 0 |
| License | MPL-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 158.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 255 |
| Author | Michael Chen |
| Maintainers | machenmusik |
| Keywords | aframe, aframe-component, aframe-vr, vr, ar, arcore, arkit, mozvr, webvr |

## Links

- npm: https://www.npmjs.com/package/aframe-ar
- Repository: https://github.com/chenzlabs/aframe-ar
- Homepage: https://github.com/chenzlabs/aframe-ar#readme
- Issues: https://github.com/chenzlabs/aframe-ar/issues
- npm.io page: https://npm.io/package/aframe-ar

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.2.1-a (latest) — 2018-03-23

## README

# aframe-ar
Basic [A-Frame](https://aframe.io) support for browser-based augmented reality (AR), 
supporting the new [three.ar.js](https://github.com/google-ar/three.ar.js) library 
and [WebARonARKit/Core browsers](https://developers.google.com/ar/develop/web/getting-started),
as well as [WebXR Viewer](https://blog.mozvr.com/experimenting-with-ar-and-the-web-on-ios/).

By simply adding the `ar` component to your [A-Frame](https://aframe.io) scene declaration:

```
<a-scene ar>
...
</a-scene>
```

[aframe-ar](https://github.com/chenzlabs/aframe-ar) will, when using a supported browser, take over the scene camera using information from ARKit / ARCore.

Basic usage:
```
<!-- First, include whichever version of A-Frame you like. -->
<script src="https://rawgit.com/aframevr/aframe/master/dist/aframe-master.min.js"></script>
<!-- Next, include three.ar.js; add the speech recognition polyfill if you want. -->
<script src="https://rawgit.com/google-ar/three.ar.js/master/dist/three.ar.js"></script>
<!-- Last, include aframe-ar. -->
<script src="https://rawgit.com/chenzlabs/aframe-ar/master/dist/aframe-ar.js"></script>

<!-- Place the ar component on your scene, and the camera will use AR by default. -->
<a-scene ar>
  <a-sphere radius="0.01" position="0 0.005 -0.5"></a-sphere>
<a-scene>  
```

Examples:

Basic AR camera: https://aframe-ar.glitch.me
- (remix with Glitch here: https://glitch.com/edit/#!/remix/aframe-ar?path=public/index.html)

`ar-raycaster` usage: https://aframe-ar-raycaster-logo-test.glitch.me/ar.html
- (remix with Glitch here: https://glitch.com/edit/#!/remix/aframe-ar-raycaster-logo-test?path=ar.html)

Plane detection and visualization: https://aframe-ar-plane.glitch.me
- (remix with Glitch here: https://glitch.com/edit/#!/remix/aframe-ar-plane?path=index.html)

https://aframe-ar-dragonites.glitch.me with many thanks to Twitter user @uveavanto et al.
- (as seen at https://twitter.com/machenmusik/status/915692630926938112)
- (remix with Glitch here: https://glitch.com/edit/#!/remix/aframe-ar-dragonites?path=index.html)
- NOTE: WebXR Viewer does not appear to fully support this example.

Reference links:

- https://aframe.io
- https://github.com/google-ar/three.ar.js
- https://developers.google.com/ar/develop/web/getting-started
- https://blog.mozvr.com/experimenting-with-ar-and-the-web-on-ios/

---
_Source: https://npm.io/package/aframe-ar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._