AR/VR web development — WebXR, A-Frame, and immersive experiences

import * as THREE from 'three';
import { VRButton } from 'three/addons/webxr/VRButton.js';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0a23);

const camera = new THREE.PerspectiveCamera(70, innerWidth / innerHeight, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);
document.body.appendChild(VRButton.createButton(renderer));

// VR environment
const floor = new THREE.Mesh(
  new THREE.PlaneGeometry(10, 10),
  new THREE.MeshStandardMaterial({ color: 0x1a1a2e })
);
floor.rotation.x = -Math.PI / 2;
scene.add(floor);

// Floating interactive cube
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(0.5, 0.5, 0.5),
  new THREE.MeshStandardMaterial({ color: 0xe94560 })
);
cube.position.set(0, 1.5, -2);
scene.add(cube);

scene.add(new THREE.AmbientLight(0x404040, 1));
scene.add(new THREE.DirectionalLight(0xffffff, 1));

renderer.setAnimationLoop(() => {
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
});

<html>
<head>
  <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <!-- Sky -->
    <a-sky color="#0a0a23"></a-sky>

    <!-- Ground -->
    <a-plane color="#1a1a2e" rotation="-90 0 0"
             width="20" height="20"></a-plane>

    <!-- Interactive objects -->
    <a-box position="-1 1.5 -3" color="#e94560"
           animation="property: rotation; to: 0 360 0; loop: true; dur: 3000">
    </a-box>

    <a-sphere position="1 1.25 -4" radius="0.5"
              color="#533483"></a-sphere>

    <a-cylinder position="0 0.75 -2" radius="0.3"
                height="1.5" color="#0f3460"></a-cylinder>

    <!-- Text -->
    <a-text value="Welcome to VR" position="0 2.5 -3"
            align="center" color="#fff"></a-text>
  </a-scene>
</body>
</html>

A-Frame handles camera, controllers, teleportation, and the render loop automatically. It is the fastest way to build a VR prototype.

import * as THREE from 'three';
import { ARButton } from 'three/addons/webxr/ARButton.js';

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

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, innerWidth / innerHeight, 0.01, 20);
scene.add(new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1));

// Reticle shows where objects will be placed
const reticle = new THREE.Mesh(
  new THREE.RingGeometry(0.05, 0.07, 32).rotateX(-Math.PI / 2),
  new THREE.MeshBasicMaterial()
);
reticle.visible = false;
scene.add(reticle);

let hitTestSource = null;

renderer.xr.addEventListener('sessionstart', async () => {
  const session = renderer.xr.getSession();
  const viewerSpace = await session.requestReferenceSpace('viewer');
  hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
});

// Tap to place object
const controller = renderer.xr.getController(0);
controller.addEventListener('select', () => {
  if (reticle.visible) {
    const mesh = new THREE.Mesh(
      new THREE.BoxGeometry(0.1, 0.1, 0.1),
      new THREE.MeshStandardMaterial({ color: 0xe94560 })
    );
    mesh.position.setFromMatrixPosition(reticle.matrix);
    scene.add(mesh);
  }
});

renderer.setAnimationLoop((_, frame) => {
  if (frame && hitTestSource) {
    const results = frame.getHitTestResults(hitTestSource);
    if (results.length > 0) {
      const hit = results[0].getPose(renderer.xr.getReferenceSpace());
      reticle.visible = true;
      reticle.matrix.fromArray(hit.transform.matrix);
    } else { reticle.visible = false; }
  }
  renderer.render(scene, camera);
});