Getting started with A-Frame

For a while now I’ve been working with the A-Frame framework for building virtual reality application in the browser and I really like it. So, it’s time to dive in deeper and what better way to do that, than writing a series of tutorials. Of course, I have to start at the very beginning and work my way through the entire framework.

This first tutorial will explain a little bit about the framework itself and shows you how to get your first polygons on screen in the browser.

What is A-Frame?

What is the A-Frame framework all about? A-Frame is a framework for building Virtual Reality applications using web technology, originally by Mozilla and started in 2015. It is built on top of the WebVR API and uses Three.js. Three.js is built on top of WebGL. This may seem like a dependency on top of a dependency. And, although it is, you probably do not want to write everything for WebGL and WebVR yourself.

A-Frame uses a declarative syntax in your HTML files, which makes your HTML files feel very natural, easy to understand and it makes copy-pasting very simple. A-Frame is, just as the web itself, cross-platform. Applications build with A-Frame run everywhere from your desktop browser to your mobile devices, on Google Cardboard, Google Daydream, and Samsung Gear, and on the HTC Vive and Oculus Rift. It supports the controllers for the various devices as well.

A-Frame is using Three.js in the back, but you are free to use whatever you want next to it on your website. Because it used the HTML component structure you can use whatever you want next to it, like Vue, Angular or React. It also comes with a visual inspector, just hit CRTL+ALT+I when running. In a later tutorial, I’ll dive deeper into this and show you what it is capable of.

A-Frame uses component you can build yourself or download from a large repository. This list is curated and can be compared with the Unity Asset store a bit. These components make it very easy to extend your application and create reusable pieces. More on this in later tutorials as well…

Let’s start a scene

In this first tutorial, we are just going to get our feet wet. Let’s start by having a look at a piece of HTML.

On line 3 you can see the A-Frame framework scripts being loaded from their CDN. You can use npm or a local, offline copy of the framework, but I personally use the CDN most of the time.

The more interesting parts are on line 6 through 8. All A-Frame tags start with an “A”. And every A-Frame application must have a scene.  The a-scene tag creates this. You can add attributes to the scene as well, but just the tag is sufficient for now. Inside the scene is an **a-box_. _**This tag adds a box entity to the scene. There are two attributes defined on that: color and position. Both are pretty self-explanatory.

What’s next?

Next time I’ll dive a little deeper into these attributes. How that work and what you can do with them.

In the meantime, you can have a look the code for this tutorial (and possibly the next tutorials as well) on my Github page. If you like to support the series you can use one of the affiliate links throughout the page. Another way of support is to become a Patreon. This will provide you with all kinds of benefits, like early access to pretty much everything I write.