AR Integration in Three.js: Building Web-Based Augmented Reality Experiences

Three.js is a powerful JavaScript library that allows developers to create 3D content in the browser. With the advent of WebXR, integrating Augmented Reality (AR) into web applications using Three.js has become not only possible but relatively straightforward. This article explores how to set up and integrate AR in Three.js using WebXR.

🚀 Why Use Three.js for AR?

• Cross-platform support via modern browsers
• Hardware-accelerated rendering via WebGL
• Built-in WebXR support for AR and VR
• Lightweight and flexible for real-time 3D applications

🧩 Technologies Involved

• Three.js: Renders 3D objects and scenes.
• WebXR Device API: Allows browsers to access AR/VR capabilities.
• WebXR AR Module: A part of WebXR used specifically for AR experiences.
• HTTPS: Required for WebXR to work (secure context).
• AR-capable device: Android device with Chrome or Oculus Browser; iOS via WebXR Viewer.

🛠️ Getting Started: Setting Up AR with Three.js

1. Basic HTML + Three.js Setup

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/webxr/ARButton.js"></script>

2. Creating the Scene and Camera

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  70,
  window.innerWidth / window.innerHeight,
  0.01,
  20
);

3. Add AR Button and Enable WebXR

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);
document.body.appendChild(ARButton.createButton(renderer, { requiredFeatures: ['hit-test'] }));

4. Placing 3D Objects in AR

const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

renderer.setAnimationLoop(function () {
  renderer.render(scene, camera);
});

📦 Optional: Hit Testing (Place Objects in Real World)

let hitTestSource = null;

renderer.xr.getSession().requestReferenceSpace('viewer').then((refSpace) => {
  renderer.xr.getSession().requestHitTestSource({ space: refSpace }).then((source) => {
    hitTestSource = source;
  });
});

This allows placing virtual objects based on real-world surfaces detected by the camera.

⚠️ Tips & Considerations

• Only works on AR-supported devices and browsers.
• Ensure HTTPS is enabled.
• Use lightweight models for better performance.
• Use real-world scale (e.g., meters).