Ten Lines Of HTML Code In Creating Augmented Reality

Posted by

The magic of A-Frame in AR.js is now a reality. Augmented Reality to perform in the web? Is it possible? Sure it is!

It is now possible for AR to run in the web by using the 10 lines of HTML Code.

With the launch of AR.js not long ago, it is now accessible to experience effective augmented reality from the web straightforward on your phone without any installation of apps. In this article, we will give you further basics on how to create your own augmented reality experience in the web.

The magic of A-Frame will be shown in the simplest 10 lines of HTML Code or AR.js to produce AR.These are:

  • Libraries included.

Start by including the A-Frame. This practice was first done by Mozilla VR to build VR experiences. A-frame is consists of three.js, so you can simply include the AR.js with it. Even for a long term used phone, AR.js can still make a 3D display in augmented reality operate rapidly on your phone.

  • Body defined.

In this step, the craft is as ease as usual. As simple as defining the body like what you usually do on all HTML pages.

  • 3D Scene created.

Then, in this step, the A-frame scene will be created. ARToolkit component is significantly going to be added. This is an open source library that can be used to stop from spreading it through the camera of your phone.

  • Simple content added.

After the 3D scene was created, it is now possible to start adding your desired objects into it. In this step, you need to add a simple box. Then, you need to customize the materials of your object to make it as transparent as ever. You can also change its position for it to be displayed on top of the AR marker.

  • AR camera added.

In this final step, an AR camera is going to be added. The preset of “hiro” or the Hiro maker, is to be included also. For the finalization, you are going to move the camera as if it was your phone. Then, that’s it.

Congratulations! Your web is now ready for an AR experience working rapidly  on your phone. You can now have the comfort over your phone of turning a simple idea into something like realistic and free of charge as simple as that.


[Total: 2    Average: 5/5] You must sign to vote
Ten Lines Of HTML Code In Creating Augmented Reality on May 11, 2017 rated 4.0 of 5

Comments 1

Leave a Reply

Join our community!
icon icon icon icon icon