Easy AR with A-Frame

Imagine you want to buy a couch for your apartment. You should think about its color, style, position, size, and so many factors that you might miss. You think about all of them and buy the coach and when the company delivers the couch and puts it in your hall, you want to hit your head to the wall because it’s not identical to your imaginations. What if you could try all of the available couches with any color of your choice. That would be awesome. It’s the power of AR that the user controls the objects and it’s like a real object in the real world.

A-frame is an open-source JavaScript library that makes it easy to create AR products with very little effort. It provides some handy HTML tags by which you can create your app in a matter of minutes. In this article, I would like to show you very easy steps to create a web application that connects to your local machine camera and integrates a 3D object into your view. The exciting part is that you can move the object base on view movements. Like it’s a real object in the real world.

In this article, I want to introduce the fastest way to experiment with AR. So, I recommend using Glitch. It’s an online code editor and it allows you to see your web page without running any web server on your local machine. We have an article about this: Glitch.

Create a new project in your glitch account and choose the “glitch-hello-website“.

I recommend deleting extra files just to make sure we don’t have any conflicting code or library. I deleted style.css and script.js and also erased all contents of index.html.

I’m using these two JavaScript libraries. Add these to the header section of your index.html. These are the main libraries of a-frame and AR.js. We are using the latest deployed versions but keep in mind that a-frame is an open-source library which means you can always take the code and change on your own and make your own specific version.

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>

In the body section, use these codes.

<body style='margin : 0px; overflow: hidden;'>
  <a-scene embedded arjs='sourceType: webcam;'>      
  <!-- handle marker with hiro preset -->
  <a-marker preset="hiro">
    <a-box position="0 0.5 0" material="color: green;" animation="property: rotation; to: 360 360 -10; dur: 2000; easing: linear; loop: true"></a-box>    
  </a-marker>
  <!-- add a simple camera -->
  <a-entity camera></a-entity>
</a-scene>
</body>

In this code I am using “a-scene” tag as the root tag for my a-frame library.

For tracking the objects in a frame, we need to marker. Our AR object will be shown relative to the position of this marker. I am using “Hiro” as a marker. You can print this image or open it on your phone. ATTENTION: This image has to have a white border. So, if you are using your phone to open this image, make sure that your phone does not hide the white border. Otherwise, it is not detectable by a-frame.

Between the “a-marker” tag you can use a-frame object tags to put an AR object and animate it as you wish. Use this page to explore all a-frame available tags and objects: A-Frame.

Here is the completed HTML code:

<!DOCTYPE html>
<html>
<header>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>    
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
</header>
<body style="margin : 0px; overflow: hidden;">
  <a-scene embedded arjs="sourceType: webcam;">      
  <!-- handle marker with hiro preset -->
  <a-marker preset="hiro">
    <a-box position="0 0.5 0" material="color: green;" animation="property: rotation; to: 360 360 -10; dur: 2000; easing: linear; loop: true"></a-box>    
  </a-marker>
  <!-- add a simple camera -->
  <a-entity camera></a-entity>
</a-scene>
</body>
</html>

Now, click on the “show” button on glitch toolbar and allow your browser to access camera. Your camera will activate at this time. Then, show the “Hiro” market to your camera. You will see the animated object on your screen and it follows the marker as you move your marker. Enjoy you first AR!

Here is a live demo: a-frame AR demo

aframe AR

Easy AR with A-Frame

Easy AR with A-Frame

Tags