ar-js-org/ar.js

★ 5,940JavaScriptAudience · developerComplexity · 3/5Setup · moderate

Mindmap

mindmap
  root((ar.js))
    AR Modes
      Image Tracking
      Location-based AR
      Marker Tracking
    Frameworks
      A-Frame integration
      Three.js integration
    How it works
      Script tag setup
      Camera permission only
      No app install needed
    Audience
      Web developers
      Creative agencies
      Educators

mindmap root((ar.js)) AR Modes Image Tracking Location-based AR Marker Tracking Frameworks A-Frame integration Three.js integration How it works Script tag setup Camera permission only No app install needed Audience Web developers Creative agencies Educators

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a product packaging experience where pointing a phone camera at a box triggers a 3D animation on top of it.

USE CASE 2

Create a location-based AR tour where visitors see digital labels anchored to specific GPS coordinates as they walk around.

USE CASE 3

Add a marker-tracking AR demo to a web page using a printed black-and-white pattern as the trigger for a 3D model overlay.

Tech stack

JavaScriptA-FrameThree.js

Getting it running

Difficulty · moderate Time to first run · 30min

Choosing the right build (A-Frame vs Three.js) for your project requires reading the documentation to match your rendering framework.

In plain English

AR.js is a JavaScript library that brings augmented reality features to websites, running entirely in a web browser without requiring a native app or special hardware beyond a camera. It supports three distinct modes: Image Tracking, where the camera recognizes a specific image and overlays 3D content on top of it, Location-based AR, where digital content appears anchored to real-world GPS coordinates, and Marker Tracking, where printed or displayed black-and-white patterns trigger overlaid content when viewed through the camera. The library comes in separate builds depending on which combination of features a project needs. Builds are available for A-Frame, a web framework that lets developers describe 3D scenes using HTML-like tags, and for Three.js, a lower-level 3D rendering library. Developers include a script tag pointing to the appropriate build, add a small set of custom HTML elements describing the scene and the trigger, and the camera view with its overlay is handled automatically. An Image Tracking example works by scanning a physical photo or on-screen image with a phone camera. When the library recognizes it, a 3D model or other content appears on top of it in real time. The Location-based mode places content at specific latitude and longitude coordinates, so a user walking outside will see objects appearing at the designated spots when they look in that direction. Marker Tracking works with printed square patterns that serve as position anchors for overlaid content. All three modes run on modern mobile browsers without any installation. The only prompt a user encounters is the standard camera permission request. The project was originally created by Jerome Etienne and is now maintained by the AR.js organization on GitHub.

Copy-paste prompts

Prompt 1

Using AR.js with A-Frame, create a webpage where pointing a phone camera at a specific photo triggers a spinning 3D model on top of it using Image Tracking.

Prompt 2

Show me how to set up AR.js location-based mode so a 3D sphere appears anchored to a specific latitude and longitude when viewed on a mobile browser.

Prompt 3

Build a simple AR.js marker-tracking example using the default Hiro marker that overlays a rotating cube and explain which HTML script tags I need.

Prompt 4

How do I choose between the A-Frame build and the Three.js build of AR.js and what is the practical difference for my project?

Open on GitHub → Explain another repo

← ar-js-org on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.