A-Frame

A web framework for building virtual reality experiences.

Examples

Find more examples on the homepage, A Week of A-Frame, and awesome-aframe.

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.

: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.

:electric_plug: Entity-Component Architecture: A-Frame is a powerful framework,
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 optimized from the ground up for WebVR. While
A-Frame uses HTML, Custom Elements don't touch the browser layout engine. All
3D object updates are all done in memory with little overhead under a single
global requestAnimationFrame call.

🔨 Tool Agnostic: A-Frame works with normal JavaScript DOM APIs and
therefore with all libraries such as
React, Vue.js, jQuery, or d3.js.
Web developers don't have to jump ship to yet another framework, feeling right
at home with A-Frame.

: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.

:package: Registry: Reuse powerful components that other A-Frame developers
have created and shared. The A-Frame
Registry collects and curates components
similar to the Unity Asset Store. Stand on the shoulders of giants and plug in
components right from HTML.

:runner: Features: Hit the ground running with A-Frame's built-in
components such as geometries, materials, lights, animations, models,
raycasters, shadows, positional audio, Vive / Touch / Cardboard controls. Get
even further with community components such as particle systems, physics,
multiuser, oceans, mountains, speech recognition, or teleportation!

Usage

$3

Build VR scenes in the browser with just a few lines of HTML! To start playing
and publishing now, remix the starter example on Glitch:


``html














`

With A-Frame's entity-component
architecture, we can drop in community
components from the ecosystem (e.g., ocean, physics) and plug them into our
objects straight from HTML:

![Remix](http://glitch.com/~aframe-registry)

`html












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">

material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
rotation="-90 0 0">

material="shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210"
scale="-1 1 1">





`

$3

To use the latest stable build of A-Frame, include aframe.min.js:

`js



`

To check out the stable and master builds, see the dist/ folder.

$3

`sh
npm install --save aframe


Or yarn add --save aframe

`js
require('aframe') // e.g., with Browserify or Webpack.
`

Local Development

`sh
git clone https://github.com/aframevr/aframe.git # Clone the repository.
cd aframe && npm install # Install dependencies.
npm start # Start the local development server.
`

And open in your browser http://localhost:9000.

$3

`sh
npm run dist
`

Questions

For questions and support, ask on StackOverflow.

Stay in Touch

- To hang out with the community, join the A-Frame Slack.
- Follow A Week of A-Frame` on the A-Frame blog.
- Follow @aframevr on Twitter.

Contributing

Get involved! Check out the Contributing Guide for how to get started.

License

This program is free software and is distributed under an MIT License.