AR.js is an open-source library for Augmented Reality on the web. It allows developers to create AR experiences that run directly in web browsers, without the need for any app installation. AR.js supports marker-based and location-based AR, making it versatile for various applications.

Pros

• Easy to use and implement, with minimal setup required
• Works on most modern devices with a web browser and camera
• Supports both marker-based and location-based AR
• Lightweight and performant, even on mobile devices

Cons

• Limited advanced features compared to native AR SDKs
• Marker detection can be inconsistent in challenging lighting conditions
• Dependency on device capabilities and browser support
• Limited 3D object tracking capabilities

Code Examples

1. Basic marker-based AR scene:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>

<a-scene embedded arjs>
  <a-marker preset="hiro">
    <a-box position="0 0.5 0" material="color: red;"></a-box>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

2. Location-based AR:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

<a-scene vr-mode-ui="enabled: false" embedded arjs="sourceType: webcam; debugUIEnabled: false;">
  <a-text value="Hello, AR!" look-at="[gps-camera]" scale="50 50 50" gps-entity-place="latitude: YOUR_LAT; longitude: YOUR_LON;"></a-text>
  <a-camera gps-camera rotation-reader></a-camera>
</a-scene>

3. Custom marker with image:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>

<a-scene embedded arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
  <a-marker type="pattern" url="path/to/pattern-marker.patt">
    <a-image src="path/to/image.png" position="0 0 0" scale="1 1 1"></a-image>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

Getting Started

1. Include AR.js and A-Frame in your HTML file:

   <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
   <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
   

2. Create an AR scene with a marker and 3D object:

   <a-scene embedded arjs>
     <a-marker preset="hiro">
       <a-box position="0 0.5 0" material="color: yellow;"></a-box>
     </a-marker>
     <a-entity camera></a-entity>
   </a-scene>
   

3. Open the HTML file in a web browser on a device with a camera to experience the AR content.