Quick Start: Augmented Reality with AR.js
Author: Matt Nutsch - @mnutsch - http://www.mattnutsch.com
Date: 8-16-2018
Description:
This is a quick start for making target based augmented reality using AFrame.js and AR.js. I put all of the dependencies into a single folder.
Instructions:
Step 1: Download or Clone the code from this repository.
Step 2: Print out the "hiro" target marker image. (https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/images/HIRO.jpg)
Step 3: Set up a web server. If you need a free one to test with, try out Github.io (https://pages.github.com/).
Step 4: Open the file "index.html" in the "start" directory.
Step 5: Add fixed view elements using HTML and CSS. (Place these outside of the scene.)
Step 6: Add 3D elements to the scene using AFrame entities. (Refer to https://aframe.io/docs/0.8.0/core/entity.html)
Step 7: Add JavaScript to power complex animations or other interactivity.
Step 8: Enjoy!
Some different types of Augmented Reality:
- Image Recognition Target Markers
- Face Recognition Target Markers
- Surface Detection
- Geo Location Based
- Visually Positioned
- Other: ???
Examples of Possible Products Made With Target Marker AR
More things for you to try:
- Create an AR Code, so that users can start your augmented reality app with a QR code scanner. [possibly Android only] (https://webxr.io/arcode-generator/)
- Incorporate custom 3D models into your app. (Either search for "obj" file or create a file with a 3D graphics editing program.)
- Create a custom target marker. (https://medium.com/arjs/how-to-create-your-own-marker-44becbec1105)