a-frame ar


by Michael Colonna


A-Frame AR is an open-source web AR development library enabling A-Frame support for three.ar.js, Google's experimental WebARonARKit/ARCore browsers, and Mozilla's experimental WebXR browser.

The library and associated resources can be found here:


No download required! Simply add the following script tags into your HTML file:

<!-- 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>

Tutorial for Hello World

Estimated Time for Hello World:

  • Mac: <20 min.

  • Windows: <20 min.

  • Linux: <20 min.

Recommended System Requirements


It is highly recommended that developers use a platform like Glitch that allows hosting and instant code deployment for small JS widgets. This makes code easily accessible from any web browser.


In order to view A-Frame AR experiences, you must have one of the following:

Note: each of these is experimental, undergoing development, and can be quite buggy.


Accessibility: The estimated time for someone to create Hello World in AR

  • Beginner: No coding or graphics experience | 20-30 minutes

  • Intermediate: Some coding or graphics experience | 10-15 minutes

  • Advanced: Both coding and graphics experience | 10 minutes

  • Expert: A lot of experience with computer graphics, specifically with this software | 10 minutes

Power: The engine's power - i.e. how much one can do with this

  • Medium – A-Frame AR is comparable to A-Frame in its power to easily and efficiently create deep, immersive experiences. However, the experimental browsers on which A-Frame AR works must be upgraded if the library is to reach its full potential.

Usage: Evaluation of software's use for the following purposes

  • Game Design - A-Frame AR is capable of producing markerless games, with interacting models. However, at this point, latency may be too high for an engaging experience.

  • Education - A-Frame AR lends itself to markerless applications, and can be used to visualize and interact with models in a room.

  • Science - Same as above; A-Frame AR is great for markerless visualization experiences.


Although A-Frame's entity-component architecture makes rapid AR app development easy to learn and very effective, A-Frame AR is bogged down by its required experimental browsers, which often crash and significantly increase latency.