Mozilla, the creators of the Firefox web browser, is a major advocate for the web platform and is fostering significant efforts to make sure that virtual reality is a ‘first-class citizen’ of the internet. With the launch of A-Frame, web developers can easily begin experimenting with VR directly on the web.

mozilla-a-frame-webvr-virtual-reality-firefox
See Also: Mozilla Launches A-Frame: VR-capable Websites Starting with One Line of Code

Mozilla’s ‘MozVR‘ team has been leading the charge for the company’s WebVR efforts. The company’s recently launched ‘A-Frame‘ is an open source library for creating VR websites; Mozilla calls it “Building blocks for the virtual reality web.”

Joshua Carpenter, Product Design Lead on the MozVR team, is one of the minds behind A-Frame and an ongoing champion of virtual reality on the web.

“A-Frame is aimed squarely at the web developer community, the vast majority of whom have been frozen out of WebVR development because they don’t know WebGL, the powerful-but-complex 3D API that WebVR runs on,” Carpenter told me recently. “A web developer who wants to create a VR site with A-Frame simply drops it into their markup via a single line of HTML, and is ready to go.”

Carpenter has shared a quick guide to show exactly how easy it is to craft a basic WebVR site with A-Frame:


A-Frame is tool that makes it easy for web developers to create VR experiences that run in the browser. It’s simple markup. With just a few lines of HTML, developers can create scenes that work on Oculus Rift, mobile devices, and desktop. All that’s needed to start an A-Frame site is…
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
    </a-scene>
  </body>
</html>
Developers can then start adding objects to their scene. Like:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
      <a-scene>
        <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
        <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-cube>
        <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
        <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>
      </a-scene>
  </body>
</html>
basic-webvr-website
Simple geometry can be added to the scene and modified on the fly with easy to read variables.

A-Frame comes with a collection of building blocks for models, videos, skies, geometries, etc. A-Frame also includes controls, animations and cursors, making it easy to add life and interaction.

Because A-Frame is simply HTML, it’s familiar to web developers and fits into their workflows. Modifying a scene with JavaScript is extremely straightforward, for example:

var scene = document.querySelector('a-scene');
var cube = document.createElement('a-cube');
cube.setAttribute('color', 'red');
scene.appendChild(cube);
Under the hood, A-Frame is built on an Entity/Component architecture. Based on best practices from the game development world, this foundation makes A-Frame modular and extensible. Objects can be added and removed from scenes without creating conflicts, and extensibility will enable developers to create and share their own custom building blocks and tools (a feature that will come in future releases).

The MozVR team has created a number of WebVR example built with A-Frame; use the ‘View Source’ button at the top right of each to explore the underlying code on Github. Open the inspector in Firefox (ctrl+shift+c) or Chrome (ctrl+shift+i) to see the live code running behind each example and even modify it in real time.

SEE ALSO
The First $100 You Should Spend on Meta Quest Games

You can learn more about WebVR, including how to set up your browser to be compatible with WebVR websites, at Mozilla’s MozVR page.

Newsletter graphic

This article may contain affiliate links. If you click an affiliate link and buy a product we may receive a small commission which helps support the publication. More information.


Ben is the world's most senior professional analyst solely dedicated to the XR industry, having founded Road to VR in 2011—a year before the Oculus Kickstarter sparked a resurgence that led to the modern XR landscape. He has authored more than 3,000 articles chronicling the evolution of the XR industry over more than a decade. With that unique perspective, Ben has been consistently recognized as one of the most influential voices in XR, giving keynotes and joining panel and podcast discussions at key industry events. He is a self-described "journalist and analyst, not evangelist."
  • Ian Shook

    The very idea of a completely 360 3D website is kind of blowing my mind.

    • Donovan Kraeker

      Here’s a Minecraft inspired website using A-Frame: Drawvr.com

      • Ryan Weisse

        Holy c**p! this may just be a basic VR site demo but…. WOW. I need to see about how to rework my IT website to use this!

  • CaptainQuality

    how is it different than VRML?

    • A-Frame

      Good question!

      A-Frame is a JavaScript framework—not a standard. That means it works today. To use it, we drop a single JavaScript file into our web pages and we’re ready to build WebVR experiences that work across desktop, mobile, Windows, Mac, etc—anywhere WebGL is supported (which is most modern browsers). We get all of this without browser vendors having to do a thing. They don’t need to know A-Frame exists; they just need to support WebGL.

      This is in sharp contrast to the bad old days wherein we would have had to wait years for a new VR web markup standard to be agreed upon, and then yet more years for individual browsers to implement support, and only then get to use the tech.

      A-Frame embodies a new way of approach to improving the web platform. In short: “Instead of taking years to draft and ship standards that people might not even want, ship new ideas early-and-often as JavaScript libraries/frameworks, let them battle it out in the market, and _then_ standardize the best of those ideas”. This helps get new capabilities into the hands of developers faster, and makes the standards that eventually coalesce better. For more background check out the Extensible Web Manifesto, here: https://extensiblewebmanifesto.org/

      A-Frame is also:

      * Built on an extensible entity-component architecture
      * Built for modern web devs and their workflows
      * Compatible with other modern web development tools (eg React, Angular, JS animation frameworks, etc)
      * Actively supported with docs, examples, community channels, etc.
      * Built by the same team implementing WebVR at the platform level (MozVR)

      For additional details on those bullet points, MozVR team member Kevin Ngo has a great overview here: http://ngokevin.com/blog/aframe-vs-3dml/

      His earlier blog post also provides a primer on A-Frame for people just getting started: http://ngokevin.com/blog/aframe/

      As do the A-Frame docs, here: https://aframe.io/docs/guide/

      • Lamanuwa

        If all PCVR platforms become too expensive for us to afford, is there a possibility of the PS4 browser supporting this content?
        How hard is that to accomplish? or Does the PS4 browser already support WebGL?

  • Jianjun HE

    How about audio? Does A-Frame supports VR audio?

  • 0xB800

    Why not extend VRML? It’s industrial standard

  • Jason Frimpong

    Woah this was posted on my birthday.

  • Alan Smithson

    THIS IS EPIC!! Websites of the future!