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.

Image for post
Image for post

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.

Image for post
Image for post

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!

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

Step 2: Add the following script:

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

Image for post
Image for post
Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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>”

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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!

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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”:

Image for post
Image for post

Go ahead and check out your code!

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

Written by

Documentation and tutorials on Python, Programming, and Data Analysis. FPL Addict. Occasionally writing about biohacking, PMing, and food.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store