AR.js Documentation

AR.js Image Tracking

Prepare image for tracking (NFT)

This quick WebAR example uses AR.js for tracking images (could also track geolocation anchors) and A-Frame as content technology. Other content option to use with AR.js would be THREE.js, but A-Frame is easier for getting started. For instructions and inspiration on what kind of things you can do, have a look here: A-Frame documentation.

Interesting code is in the file index.html. Simplified, "less scary" version of index.html for getting started is index-simple.html.

Live demo: open the T-Rex or OLebre image on your computer/tablet and open the webar-test page on your phone. Point the phone camera at the image and you should see a 3D chest/cube.

For example, you could add you own .png image into the application by using the a-image primitive, details here: a-image. Your own image could be displayed where the tracked image is detected, or any other position. For videos or GIFs/short loops you can use a-video. For starters, you could replace the a-entity tags (3D models) in index.html with a-image or a-video.

Recommended hosting environment for testing is GitHub Pages, but other web host can work just as well.