A-Frame WebXR

Build VR and AR experiences for the web with A-Frame — declarative HTML entities on top of Three.js. Covers components, scenes, asset management, WebXR controllers, hand tracking, and AR passthrough on Quest/Vision Pro.

This skill helps you build WebXR experiences using A-Frame. It writes scenes as HTML, builds custom components in JavaScript, manages 3D assets (glTF, audio, 360 video), implements controller and hand tracking, supports both immersive VR and AR passthrough modes, optimizes for Quest 3 / Vision Pro / mobile WebXR, and integrates physics (ammo.js) and networking (networked-aframe). Covers common pitfalls: draw call budgets, texture sizes, and the gulf between Three.js power and A-Frame ergonomics.

When to use

Use when building VR/AR demos that need to ship as URLs (no app store), prototyping immersive experiences quickly, building training simulations or educational content, or wrapping Three.js in declarative HTML for designer-friendly workflows.

Examples

VR product showroom

Build a VR product viewer

Build an A-Frame VR product showroom with glTF model viewer, hotspots that trigger info panels, controller teleport movement, and 360 environment HDR

AR passthrough on Quest

Build an AR experience with passthrough

Create an A-Frame AR app for Quest 3 with passthrough enabled, hit-test to place virtual furniture on detected planes, and hand tracking for grab/scale