A-Frame

Web framework for building virtual reality experiences.

Virtual Reality

aframevr/aframe aframe.io/aframe

README

A-Frame

A web framework for building virtual reality experiences.

Site

—

Docs

—

School

—

Slack

—

Blog

—

Newsletter

Examples

Find more examples on the homepage, A Week of A-Frame, and WebVR Directory.

Features

:eyeglasses: Virtual Reality Made Simple: A-Frame handles the 3D and WebVR

boilerplate required to get running across platforms including mobile, desktop, Vive, and Rift just by dropping in ``.

:heart: Declarative HTML: HTML is easy to read and copy-and-paste. Since

A-Frame can be used from HTML, A-Frame is accessible to everyone: web

developers, VR enthusiasts, educators, artists, makers, kids.

:electric_plug: Entity-Component Architecture: A-Frame is a powerful

framework on top of three.js, providing a declarative, composable, reusable

entity-component structure for three.js. While A-Frame can be used from HTML,

developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and

WebGL.

:zap: Performance: A-Frame is a thin framework on top of three.js.

Although A-Frame uses the DOM, A-Frame does not touch the browser layout

engine. Performance is a top priority, being battle-tested on highly

interactive WebVR experiences.

:globe_with_meridians: Cross-Platform: Build VR applications for Vive,

Rift, Daydream, GearVR, and Cardboard. Don't have a headset or controllers? No

problem! A-Frame still works on standard desktop and smartphones.

:mag: Visual Inspector: A-Frame provides a built-in visual 3D inspector

with a workflow similar to a browser's developer tools and interface similar to

Unity. Open up any A-Frame scene and hit ` + + i`.

:runner: Features: Hit the ground running with A-Frame's built-in

components such as geometries, materials, lights, animations, models,

raycasters, shadows, positional audio, tracked controllers. Get even further

with community components such as particle systems, physics, multiuser, oceans,

mountains, speech recognition, or teleportation!

Usage

Example

Build VR scenes in the browser with just a few lines of HTML! To start playing

and publishing now, remix the starter example on:

``` html
<html>
<head>
<script src="https://aframe.io/releases/1.3.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>
```

With A-Frame's [entity-component

architecture](https://aframe.io/docs/1.3.0/introduction/entity-component-system.html), we can drop in community

components from the ecosystem (e.g., ocean, physics) and plug them into our

objects straight from HTML:

``` html
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
<script src="https://unpkg.com/aframe-gradient-sky@1.3.0/dist/gradientsky.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity>
<a-entity id="sphere" geometry="primitive: sphere"
material="color: #EFEFEF; shader: flat"
position="0 0.15 -5"
light="type: point; intensity: 5"
animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true"</a-entity>
<a-entity id="ocean" ocean="density: 20; width: 50; depth: 50; speed: 4"
material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
rotation="-90 0 0"</a-entity>
<a-entity id="sky" geometry="primitive: sphere; radius: 5000"
material="shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210"
scale="-1 1 1"</a-entity>
<a-entity id="light" light="type: ambient; color: #888"></a-entity>
</a-scene>
</body>
</html>
```