Note: This documentation is for the old 0.3.0 version of A-Frame. Check out the documentation for the current 0.5.0 version
A-Frame is an open-source WebVR framework for creating virtual reality (VR) experiences with HTML. We can build VR scenes that work across smartphones, desktop, the Oculus Rift, and the room-scale HTC Vive.
Diving deeper, A-Frame is a three.js framework that brings the entity-component-system pattern to the DOM; everything in a scene is an entity which we compose and attach components to add any appearance, behavior, and functionality. Under the hood,
<a-box> actually looks like:
<a-entity> represents an entity, attributes represent components, and attribute values represent component properties. Components can do anything. Say someone publishes a
physics component and someone else publishes an
explode component. We can compose them together and attach them to the entity to add the behavior of exploding on collision.
A-Frame was built by the Mozilla VR team to make it quicker and easier to build 3D/VR scenes in order for them to prototype faster and to bridge the web development community into the WebVR ecosystem. For WebVR to succeed, it needs content. There are only a handful of WebGL developers in the world, but there are millions of web developers, designers, and artists. A-Frame puts 3D/VR content creation into the hands of everyone.
Without A-Frame, starting a proper WebVR project is a lot of effort. You need to know what you are doing and repeat the same tedious work for every scene:
WebVR should thrive with long-tail, bite-sized experiences, but boilerplate is a strong barrier to motivation of wanting to build. In A-Frame, all boilerplate is reduced to a single line of HTML:
And rather than creating a mesh, creating a geometry, creating a material, then appending to scene, that is all also reduced to a single line of HTML.
With A-Frame based on the DOM, we can manipulate scenes as we would with other web application:
“A-Frame is like when MVC landed in traditional front-end work…[where] three.js is like jQuery.” — @wizgrav
three.js has made it very accessible to develop 3D WebGL, but three.js code is often loosely structured. A-Frame provides a way to structure three.js code.
A-Frame is a declarative entity-component-system framework for three.js.