Note: This documentation is for the old 0.2.0 version of A-Frame. Check out the documentation for the current 0.5.0 version
A-Frame is a open-source framework for creating 3D and virtual reality experiences on the web. It was built by the MozVR team to more quickly prototype WebVR experiences as we asked ourselves “what would the virtual reality on the web look like?”. Just as today on the web, we click on links to jump from page to page, one day we will walk through portals to jump from world to world. And to have worlds to jump between, we need WebVR content. Unfortunately, there are only a handful of WebGL developers in the world, but there are millions of web developers, web designers, and 3D artists. A-Frame puts VR content creation into hands of everyone. A “Hello World” A-Frame scene might look like:
Under the hood, A-Frame is built on top of Custom Elements and is powered by three.js. Although A-Frame at first looks like only a handful of custom HTML elements like
<a-cube>, A-Frame at its heart is a entity-component-system-based three.js framework with a DOM interface. Everything in an A-Frame scene is an entity which we plug components into in order to compose appearance, behavior, and functionality. This allows experienced developers share reusable components that other developers can drop into their scene and use immediately. The scene above looks needlessly verbose, but we see its true power when we’re able to attach and compose appearance and behavior at whim:
Read through the documentation front-to-back for more details, and if you have any questions, join the other hundreds of developers on Slack! Welcome to the future of the web.
Check out awesome things that people have done with A-Frame.