NOTE: This version of the documentation tracks unstable development happening on A-Frame’s
masterbranch. If you wish to try it out, grab the unstable build. Otherwise, head to the documentation for the current 0.8.0 version
A-Frame can be developed from a plain HTML file without having to install
anything. A great way to try out A-Frame is to remix the starter example on
Glitch, an online code editor that instantly hosts and deploys for
free. Alternatively, create an
.html file and include A-Frame in the
The Installation page provides more options for getting started with A-Frame. To get started learning A-Frame, check out A-Frame School for visual step-by-step lessons to complement the documentation.
-Frame is a web framework for building virtual reality (VR) experiences. Originally from Mozilla and largely maintained by the co-creators of A-Frame within Supermedium, A-Frame was developed to be an easy yet powerful way to develop VR content. As an independent open source project, A-Frame has grown to be one of the largest and most welcoming VR communities.
A-Frame is based on top of HTML, making it simple to get started. But A-Frame is not just a 3D scene graph or a markup language; the core is a powerful entity-component framework that provides a declarative, extensible, and composable structure to three.js.
A-Frame supports most VR headsets such as Vive, Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard, and can even be used for augmented reality. Although A-Frame supports the whole spectrum, A-Frame aims to define fully immersive interactive VR experiences that go beyond basic 360° content, making full use of positional tracking and controllers.
VR Made Simple: Just drop in a
<script> tag and
A-Frame will handle 3D boilerplate, VR setup, and default controls. Nothing to
install, no build steps.
Declarative HTML: HTML is easy to read, understand, and copy-and-paste. Being based on top of HTML, A-Frame is accessible to everyone: web developers, VR enthusiasts, artists, designers, educators, makers, kids.
Cross-Platform VR: Build VR applications for Vive, Rift, Windows Mixed Reality, Daydream, GearVR, and Cardboard with support for all respective controllers. Don’t have a headset or controllers? No problem! A-Frame still works on standard desktop and smartphones.
Performance: A-Frame is optimized from the ground up for WebVR. While A-Frame uses the DOM, its elements don’t touch the browser layout engine. 3D object updates are all done in memory with little garbage and overhead. The most interactive and large scale WebVR applications have been done in A-Frame running at 90fps. For reference, see A-Painter, a Tilt Brush clone built in A-Frame that is indiscernible from native.
Visual Inspector: A-Frame provides a handy built-in visual 3D
inspector. Open up any A-Frame scene, hit
<ctrl> + <alt> + i,
and fly around to peek under the hood!
Components: Hit the ground running with A-Frame’s core components such as geometries, materials, lights, animations, models, raycasters, shadows, positional audio, text, and Vive / Touch / Windows Motion / Daydream / GearVR / Cardboard controls. Get even further with community components such as particle systems, physics, multiuser, oceans, mountains, speech recognition, motion capture, teleportation, super hands, and augmented reality.
Proven and Scalable: A-Frame has been used by companies such as Google, Disney, Toyota, Ford, Amnesty International, CERN, NPR, Al Jazeera, The Washington Post. Many startups and studios have founded themselves on top of A-Frame (e.g., Supermedium, Virtuleap, 3Data, Scapic, Halo Labs, Archilogic, Lucid Web, Composure). A-Frame has been used everywhere in large interactive applications running at 90fps such as Supercraft (similar to Google Blocks), A-Painter (similar to Tilt Brush), or Soundboxing. Check out WebVR Directory for more!
If it’s your first time here, here’s a plan for success for getting into A-Frame:
Read through the documentation to get a grasp. Glitch is used as a recommended coding playground and for examples.
Run through A-Frame School, a brief step-by-step visual tutorial.
When you build something, share your project online and we’ll try to feature it on A Week of A-Frame!