Road To WebVR using MozVR A-Frame


Hello everyone who are going through this blog post. I have divided the contents of this post into two sections :

  • My experience on getting started with A Frame
  • Simple & basic tutorial for beginners to get started with A Frame

1. My experience on getting started with A Frame

I came to know about “Web Virtual Reality” in a meet up organized by Mozilla India. Earlier, I had a very basic idea of VR. I mean as such, no idea but I knew that virtual reality is something which can give us a illusion of reality or some real scenario without its physical existence or what we called it ‘Virtual’. Even after the meet up, I didn’t have much knowledge and concept of virtual reality. Later on, I joined the focus group of MozVR and attended few hangout calls and then I got to know about how to contribute to this project and how to start from the scratch. Then, I created few scenes by using A Frame. In the beginning, I felt somewhat bored and uninterested but when I continued making scenes for more few days, I started feeling creative and took deep interest in designing various types of scenes. It’s really interesting. The main thing is that it is not necessary for you to have knowledge of hardcore coding or programming concepts to learn A Frame, what you just need is a very basic knowledge of HTML. For me, I found it very easy to learn and develop scenes or webpages using A Frame.  And I am pretty sure that you will also find A Frame a very easy tool and framework to get you start with Virtual Reality and really you are going to enjoy it. 😀

2. Simple & basic tutorial for beginners to get started with A Frame

Before moving to tutorial, let me to tell you following things :

> What is Virtual Reality ?

Virtual reality is an artificial environment that is created with software and presented to the user in such a way that the user suspends belief and accepts it as a real environment.
Virtual reality is the term used to describe a three-dimensional, computer generated environment which can be explored and interacted with by a person. That person becomes part of this virtual world or is immersed within this environment and whilst there, is able to manipulate objects or perform a series of actions. [Source – Internet]

> What is A Frame ?

A-Frame is an open-source WebVR framework for creating virtual reality (VR) experiences with HTML. We can build VR web pages that we can walk inside with just HTML. Under the hood, it is a three.js framework that brings the entity-component-system pattern to the DOM. A-Frame is built to make virtual reality more accessible to the web community and to kick-start the WebVR content ecosystem. It is easy to learn and fast to develop, allowing us to quickly prototype patterns and experiences. A-Frame is a vehicle in which to make WebVR successful. [Source –]

Wohoo !!! Now we can start our tutorial 😀 😀

1. Firstly, I would suggest you to visit A Frame website. A Frame is developed by Mozilla so it is also named as “MozVR”. You can see this in the bottom right corner of this website. Here is the screenshot of this website’s home page :


Please go through the modules and contents of this website seriously because it is going to help you more than my blog post as I would not be possible for me to explain and cover each and every API, Components, Primitives and concepts here. On the left hand side of this website, there are few examples which you can go through and understand  what actually you are going to do by using A Frame.

2. Click on the very first module on the top named as “Docs”. Here you will find introduction, concepts and API, primitives, components and much more. Just go through all this quickly. As you are a beginner, don’t get trapped in high level concepts in the very beginning. We should always start from easy concepts and then gradually move to high level concepts. So for now, I am going to focus on Primitives mostly.

3. Open your text editor (whatever youuse, I use Sublime Text) and put basic HTML tags you know (i.e., <html>, <head>, <body> etc.). To use and integrate the functionalities of A Frame in our code, we have to include JS build by using the tag as follows :


Currently, 0.3.0 is the latest version.

4. Now, I am going to use two or more primitives (like <a-cone>, <a-sphere> etc.) to develop a very simple WebVR scene. Remember, whichever primitive or attribute you will use, it must be put in <a-scene> tag and then <a-scene> tag again inside the <body> tag. Don’t forget to close all the opened tags you have used in your code. Everything in a scene is an entity which we compose and attach components (like position, color, radius, height, width etc.) to add any appearance, behavior, and functionality.

5. Firstly, I am using <a-cone> primitive to have a cone in my scene. According to your choice, you can set desired position, radius, color etc of your shape.


Output :

6. Now, I am going to add more shapes to the existing scene so that it look meaningful. 😀


Output :


7. As it’s so easy to design such scenes, I have not taken care all the the steps one by one to add extra shapes in the above output. But friends, A Frame is not just limited to adding these shapes only. A Frame is very vast and you should try other primitives, components and concepts also. You can try videos, curved images, animations, sounds, mixins and much much more. 😀

Are you ready to create your own scene ?
Excited ?
Yes You Are. 😛
Go Ahead !