🚀 AR Development with A-Frame

Learn to build marker-based augmented reality experiences that run in any modern mobile browser

A-Frame

AR.js

WebXR

1

Create Your Project Folder

Let's start by setting up our development environment:

Create a new directory called my-ar-project
Create an index.html file inside it
Open the folder in your preferred code editor

💡 Tip: VS Code is recommended for web development with excellent HTML/JavaScript support

Terminal Commands

mkdir my-ar-project
cd my-ar-project
code .
touch index.html

2

Add A-Frame and AR.js Libraries

Include the required libraries in your HTML head section:

A-Frame: The web framework for building VR/AR experiences
AR.js: Augmented reality library for marker tracking
Embedded mode: Optimized for mobile browsers

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>AR with A-Frame</title>
  <!-- A-Frame -->
  <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  <!-- AR.js for marker tracking -->
  <script src="https://cdn.rawgit.com/jeromeetienne/ar.js/3.3.2/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin:0;overflow:hidden;">
  <a-scene embedded arjs>
    <!-- content goes here -->
  </a-scene>
</body>
</html>

3

Insert Marker and 3D Object

Add a marker and your first 3D object inside the a-scene tag:

💡 Built-in Markers: Use "hiro" or "kanji" presets for quick testing

Scene Configuration

<a-scene embedded arjs>
  <!-- Marker definition -->
  <a-marker preset="hiro">
    <!-- A basic 3D box -->
    <a-box position="0 0.5 0" rotation="0 45 0" material="color: purple;"></a-box>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

4

Serve Files Locally

Browsers block camera access on file URLs. Set up a local HTTP server:

🔒 Security Note: HTTPS is required for camera access in production environments

Server Options

# If you have Python 3 installed:
python3 -m http.server 8000

# Alternative with Node.js:
npx serve

# Or use Live Server extension in VS Code

Then open your phone's browser to:

http://<your-computer-IP>:8000

5

Test Your AR Experience

Ready to see the magic happen!

Print or display the "hiro" marker
Point your phone's camera at the marker
Watch the purple box appear anchored to the marker!

The 3D object should track perfectly with the marker movement, creating an immersive AR experience right in your browser!

📱 Marker URL: https://jeromeetienne.github.io/AR.js/aframe/examples/marker-training/examples/pattern-files/hiro.png

6

Add Your Own 3D Models

Replace the basic box with sophisticated glTF models:

Model Organization:

Create a models/crate/ folder structure
Place your scene.gltf file inside
Adjust scale and position as needed

Model Integration

<a-marker preset="hiro">
  <a-entity
    gltf-model="url(models/crate/scene.gltf)"
    scale="0.5 0.5 0.5"
    position="0 0 0">
  </a-entity>
</a-marker>

7

Customize and Expand

Take your AR to the next level:

Shapes: Try <a-sphere>, <a-cylinder>, <a-plane>
Animations: Add movement with animation components
Interactions: Implement click and touch events
Advanced Tracking: Use NFT markers for complex patterns
Lighting: Add realistic lighting effects
Physics: Integrate physics engines for realistic behavior

🎯 Pro Tip: Start simple and gradually add complexity. Test frequently on mobile devices for best results.

🎉 Congratulations!

You've successfully created a marker-based AR experience using A-Frame and AR.js that works in any modern mobile browser!

✅ Project Setup

✅ 3D Objects

✅ AR Tracking

✅ Mobile Ready

Keep experimenting and building amazing AR experiences!