Introduction

A-Frame

What is A-Frame?

:a:-Frame is a web framework for building virtual reality (VR) experiences. As originators of WebVR, the Mozilla VR team developed A-Frame to be the easiest as well as the most powerful way to develop WebVR content. As a fully open 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, 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. The Mozilla VR team is currently using A-Frame as the foundation for a Metaverse-in-progress.

Getting Started

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. Or create an .html file and include A-Frame in the <head>:

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

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.

Features

:eyeglasses: VR Made Simple: Just drop in a <script> tag and <a-scene>. A-Frame will handle 3D boilerplate, VR setup, and default controls. Nothing to install, no build steps.

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

:globe_with_meridians: Cross-Platform VR: Build VR applications for Vive, Rift, 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.

:electric_plug: Entity-Component Architecture: A-Frame is a powerful three.js framework, providing a declarative, composable, reusable entity-component structure. HTML is just the tip of the iceberg; 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 the DOM, its elements don’t touch the browser layout engine. 3D object updates are all done in memory with little overhead under a single requestAnimationFrame call. For reference, see A-Painter, a Tilt Brush clone built in A-Frame that runs like native (90+ FPS).

:hammer: Tool Agnostic: Since the Web was built on the notion of HTML, A-Frame is compatible with most libraries, frameworks, and tools including React, Preact, Vue.js, d3.js, Ember.js, jQuery.

:mag: 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!

Inspector

:package: Registry: Take powerful components that developers have published and plug them in straight from HTML. Similar to the Unity Asset Store, the A-Frame Registry collects and curates these components for easy discovery.

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

Off You Go!

If it’s your first time here, here’s a plan for success for getting into A-Frame:

  1. For inspiration, check out what other people have built with A-Frame on the Weekly Blog and awesome-aframe. Users of A-Frame have included The Washington Post, Amnesty International, Google Creative Labs, Al Jazeera, NPR, Shopify, iStaging, and IDEO.

  2. Read through the basic documentation and guides to get a grasp.

  3. Run through A-Frame School, a brief step-by-step visual tutorial.

  4. Join us on Slack and if you have any questions, search and ask on StackOverflow, and someone will get right to you!

  5. When you build something, share your project online and we’ll feature it on A Week of A-Frame!

Have fun!