First AR.js App

Tutorial #1 – First AR.js App

by Michael Colonna

AR.js is an open-source library built on top of A-Frame, three.js, and ARToolKit. It leverages the power of WebGL and WebVR to enable augmented reality experiences that run directly in the browser, with surprisingly smooth results. It is marker-based, with entities attached to physical patterns/barcode-like objects in the user's environment (rather than attached to a cloud of feature points that demarcate a surface).

In this tutorial, we'll be creating a very simple AR.js application in a few lines of HTML!

What you'll need:

For this tutorial I also highly recommend creating a Glitch account, if you haven't already. Glitch provides an interface that allows users to host and deploy small web apps (like ones that are only a few lines of HTML) so that they're accessible from any device. Of course, if you want to host this web app by other means feel free – but I will be using Glitch for the remainder of this tutorial.

Creating Our First AR Web App

Create a new Glitch hello-webpage project. You should get an editor that looks like this:

In the top left corner, you'll see a two-word name for your web app (mine is "nice-stallion"). Whenever you want to access your web app, you can go to "https://[app-name]" and see your most recent code running. Pretty sweet for accessing your app from any device!

First, let's import the libraries we need. We need AR.js and A-Frame, so copy and paste the following <script> tags into your header like so:

<script src=""></script>

<script src=""></script>

Next, let's delete the HTML code within the <body> tags. Add these lines of code to the <body>:


  <a-scene embedded arjs>

    <a-marker preset="hiro">

      <a-box position="0 0.5 0" material="color: yellow;"></a-box>


    <a-entity camera></a-entity>



What's going on here?

If you're familiar with A-Frame, you might recognize the <a-scene> tags which denote a new A-Frame scene. Essentially, AR.js allows us to port these A-Frame scenes into AR by adding the "embedded arjs" components to the <a-scene> tag.

The <a-marker> tag denotes an environment marker. In this case, the preset is set to "hiro", which means that the app begins to look for this marker in the environment. When it finds the marker, it places the inner <a-box> entity on top of the marker. Since the center of the marker has a local position of "0 0 0", a position of "0 0.5 0" allows the box to appear on top of the marker.

The <a-entity> tag initializes a camera for the scene.

Run the app!

If you now navigate to https://[app-name] (or you can checkout mine running at you can see your app running!

If you're using your laptop, pull up this marker on your phone and put it in front of the camera. You should see something like this:

If you're using your mobile device, pull up the same marker on your laptop, and see the processing happening on your phone!

You'll notice that it runs pretty smoothly (60 fps) on either device. That's the power of WebAR (aka doing all the processing on the browser)!

Click here for the next tutorial on event handling!