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