Getting Started with A-Frame: 4 Steps to Building WebVR Experiences with HTML

I’m a web developer newb. I know two cups of HTML, a tablespoon of CSS, and a pinch of Javascript, and now I’m jumping into A-Frame. I thought it was going to be hard to get started, but holy f***k was it easy. Ooh, So easy.

My name is David, and I’m learning to program virtual reality experiences with a mark-up design language called “A-Frame.” I learned to use A-Frame in 5 minutes, and it’s lit my mind on fire with the possibilities.

I’d like to help you get started with what I’ll call my “A-Frame for Dummies” inspired by my own beginnings with the language and A-Frame School. Read on and enjoy the 4-step process. Say “hello” to a virtual world of new possibilities!

Getting Started

Step 1: Lay out your HTML document in a text editor like Sublime. Be sure to save as a .html file

If you saved as, say, “index.html”, go ahead and open up the page on your local server. You’ll see a blank page. This is our blank canvas, and we will continue to refresh and test our code as we paint with A-Frame.

If you haven’t already, you’ll need to set up a web development environment, or use Glitch, as recommended by the A-Frame School.

Step 2: Add the following script:

<script src=“https://aframe.io/releases/0/7/0/aframe.min.js”></script>

Step 3: Add a scene like you’d add a div in HTML with: <a-scene></a-scene>

<a-scene> creates the canvas where you’ll add elements, and also gives you your first interactive element on the page! Check it out in the bottom right-hand corner:

You can click on the VR-Goggle icon and enter into your empty VR scene.

Step 4: Add an element.

A-Frame Documentation calls these simple, baked-in elements “primitives.”

Examples: <a-box> or <a-sphere> or <a-cylinder>. Primitives pre-pack “components” together into something very simple and easy-to-use. Here is a list of the A-Frame Geometric and Scene Primitives.

Let’s add a geometric primitive and see what happens with the code:

“<a-sphere position=“0 0 -10”></a-sphere>”

Primitive’s have several qualities. For instance, <a-sphere> has a position, radius, and color. But all it really needs to get on the screen is a position.

Go ahead and enter VR-Goggle mode!

Now escape, and let’s load the “inspector” with ctrl + alt + i:

Click on your primitive, and the you can move your geometric primitive around and adjust attributes like position, rotation, scale, etc.

Neat-o. Now let’s get out of there (escape, esc) and add a few more attributes to our geometric primitive like “color” and “radius”:

Go ahead and check out your code!

ctrl + alt + i one more time to load the inspector:

Wow, look at us go. We’ve already learned how to program a virtual reality Pluto. Looks cold down there.

And that’s it for Lesson 1. I’ll be back with more as I learn to use A-Frame.

Cheers.