// 2026.05.20

A-Frame: the Fastest Way into WebXR (Quest 3, Vision Pro & Spectacles)

10:00 JST

If you want a working headset demo with zero toolchain, WebXR via A-Frame is the shortest path. It’s a declarative web framework on top of three.js + WebXR — you describe a scene with HTML-like tags and the browser handles the headset.

▸ aframe.io · github.com/aframevr/aframe (MIT, v1.7.1)

The entire starter

A complete WebXR scene is a single HTML file — no npm, no bundler:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.7.1/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 1.5 -3" color="#ff006e"></a-box>
      <a-sphere position="1 1.5 -4" color="#00d4ff"></a-sphere>
      <a-sky color="#1a0f08"></a-sky>
    </a-scene>
  </body>
</html>

A-Frame automatically injects an Enter VR / Enter AR button. For a structured starting point, fork the official aframe-boilerplate or work through Building a Basic Scene in the docs. The component ecosystem (physics, hand controls, environment, networked-aframe for multiplayer) covers most hackathon needs.

Deploy & target devices

WebXR requires HTTPS. Either deploy to a static host (GitHub Pages, Vercel, Cloudflare Pages), or — better for fast iteration — keep editing locally and expose your dev server over a public HTTPS URL with a tunnel: Cloudflare Tunnel, ngrok, or Tailscale Funnel.

The fastest of these is Cloudflare’s quick tunnel — no account, one command. Point it at whatever port your local server uses:

cloudflared tunnel --url http://localhost:8080

It prints a public https://<random>.trycloudflare.com URL. Open that URL in the headset’s browser:

  • Meta Quest 3 — Meta Quest Browser has full WebXR: immersive-vr, immersive-ar passthrough, and hand tracking. Open the URL, tap Enter VR/AR. This is the smoothest target.
  • Apple Vision Pro — Safari on visionOS supports WebXR (immersive-vr) with hand/transient-pointer input. Support is newer than Quest’s, so test the Enter VR flow early and keep interactions simple.
  • Snap Spectacles — supported via the Spectacles Browser Lens. WebXR apps run directly in that browser — no Lens Studio required — in immersive-ar mode with hand tracking as the primary input. Caveats per Snap’s docs: hit-testing is currently emulated (full native planned), and WebXR gamepads aren’t practically usable, so design around hands. For deeper native integration the Lens Studio route remains an option — see our Spectacles & Lens Studio starter.

Why this fits a 2.5-day hackathon

  • No build step — edit HTML, refresh the headset browser, iterate in seconds.
  • One codebase, three targets — the same URL runs on Quest 3, Vision Pro, and Spectacles (mind each platform’s input/mode notes above).
  • Huge component library — bolt on physics, networking, and controllers instead of writing engine code.

Questions? Reach us via the Contact page.

// BACK TO NEWS