Augmented Reality in 10 Lines of HTML – ARjs – Medium

  • Augmented Reality in 10 Lines of HTMLAR.js with a-frame magicDo you want to do Augmented Reality on the web ?
  • The shortest example of AR.js is only 10lines of HTML thanks to the magic of a-frame.
  • You can see it live on codepen:AR.js example in 10 lines of HTMLLet’s break it down line by line.Including the LibrariesFirst, you include a-frame, an effort started by MozillaVR to build VR experiences.
  • AR.js will make the 3d displayed in AR run very fast on your phone, even if it’s a 2–3 year old phone!Defining the BodyUsual html body — not much hereIn this step, it’s all business as usual.
  • You now have augmented reality, in only 10 lines of HTML, running fast on your phone and free of charge.Check out this video version I made of the tutorial:

Do you want to do Augmented Reality on the web ? You can now do it in 10 lines of HTML! Seriously! Let me walk you thru the code, it’s crazy simple. We released AR.js recently. You can experience…

@fulsoul: “#AugmentedReality in 10 Lines of HTML”
#AR #VR #UX #UI #tech #code #indiedev

Do you want to do Augmented Reality on the web ? You can now do it in 10 lines of HTML! Seriously! Let me walk you thru the code, it’s crazy simple.

We released AR.js recently. You can experience efficient augmented reality for the web directly on your phone without installing any applications. But let’s go further and see how to produce your own augmented reality experience. The shortest example of AR.js is only 10lines of HTML thanks to the magic of a-frame. You can see it live on codepen:

First, you include a-frame, an effort started by MozillaVR to build VR experiences. A-frame contains three.js. Then you simply include AR.js for a-frame. AR.js will make the 3d displayed in AR run very fast on your phone, even if it’s a 2–3 year old phone!

Next, we are going to create our a-frame scene. We also need to add the ARToolkit component. ARToolKit is an open-source library that we use to localize it through the phone camera.

Once we have created the 3d scene, we can start adding objects to it. In this line, we add a simple box. We then modify its material to make it transparent. We also change its position so it displays on top of the AR marker.

In this last step, we are going to add a camera. We include the preset ‘hiro’ (as in Hiro marker). Finally, we make it move as if it were your phone. Easy right?

Congratulations! You are done. You now have augmented reality, in only 10 lines of HTML, running fast on your phone and free of charge.

Augmented Reality in 10 Lines of HTML – ARjs – Medium

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.