graphwiz.aiA-Frame WebXR: Build VR Experiences in 15 Minutes
XRWebXR
aframewebxrvrthree.jsweb
A-Frame WebXR: Build VR Experiences in 15 Minutes
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.