A-Frame WebXR: Build VR Experiences in 15 Minutes
~1 min read
XRWebXRaframewebxrvrthree.jsweb
A-Frame abstracts Three.js into declarative HTML, making VR development accessible to web developers. Built by Mozilla, it's the fastest way to create WebXR content.
Why A-Frame?
| Advantage | Description |
|---|---|
| HTML syntax | Write 3D scenes with HTML tags |
| Entity-Component | Flexible composition system |
| VR-native | Works in browser and headsets |
| Inspector | Visual editor included |
| Community | 1000+ components available |
Quick Start
Basic HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
```text That's it. Open in a browser, click VR mode, put on a headset. ## Core Primitives ### Basic
Shapes ```html
<a-box color="red"></a-box>
<a-sphere color="blue"></a-sphere>
<a-cylinder color="green"></a-cylinder>
<a-plane color="gray"></a-plane>
<a-cone color="yellow"></a-cone>
```text ### Media ```html
<!-- 360 image -->
<a-sky src="panorama.jpg"></a-sky>
<!-- 360 video -->
<a-videosphere src="video.mp4"></a-videosphere>
<!-- 3D model -->
<a-entity gltf-model="model.glb"></a-entity>
```text ## Entity-Component System A-Frame uses ECS architecture: ```html
<a-entity
position="0 1 -3"
rotation="0 45 0"
scale="1 1 1"
material="color: red; metalness: 0.7"
geometry="primitive: box; width: 2"
></a-entity>
```text ## Custom Components ### Register Component ```javascript
AFRAME.registerComponent('rotate-on-hover', { init: function() {
this.el.addEventListener('mouseenter', () => { this.el.setAttribute('rotation', '0 90 0'); });
this.el.addEventListener('mouseleave', () => { this.el.setAttribute('rotation', '0 0 0'); }); } });
```text ### Use Component ```html
<a-box rotate-on-hover color="blue"></a-box>
```text ## Animation ### Built-in Animation ```html
<a-box
position="0 1 -3"
color="tomato"
animation="property: rotation; to: 0 360 0; loop: true; dur: 2000"
>
</a-box>
```text ### Multiple Animations ```html
<a-entity
animation__rotate="property: rotation; to: 0 360 0; loop: true; dur: 2000"
animation__scale="property: scale; to: 1.2 1.2 1.2; loop: true; dir: alternate; dur: 1000"
>
</a-entity>
```text ## Interaction ### Cursor Component ```html
<a-entity camera look-controls>
<a-entity
cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat"
>
</a-entity>
</a-entity>
```text ### Click Events ```html
<a-box
class="interactive"
event-set__mouseenter="scale: 1.2 1.2 1.2"
event-set__click="color: blue"
>
</a-box>
```text ## Physics Add physics with the physics component: ```html
<script src="https://unpkg.com/aframe-physics-system@1.4.0/dist/aframe-physics-system.min.js"></script>
<a-scene physics>
<a-box dynamic-body position="0 4 -3" color="red"></a-box>
<a-plane
static-body
position="0 0 -3"
rotation="-90 0 0"
width="10"
height="10"
color="#7BC8A4"
></a-plane>
</a-scene>
```text ## Inspector Press `Ctrl + Alt + I` to open the visual inspector. Edit entities visually,
export code. ## Deployment A-Frame apps are static files. Deploy anywhere: ```bash # Netlify netlify
deploy --prod # Vercel vercel --prod # GitHub Pages git push origin gh-pages ```text ## Conclusion
A-Frame makes VR development as easy as writing HTML. Start with primitives, add components, then
write custom JavaScript when needed. The barrier to entry has never been lower.