‘Imperfect VR’ with A-Frame

VR face

Amid the Animoji and face recognition fanfare of the iPhone X launch, the announcement that got me really excited was the augmented reality engine baked into iOS11. With 400 million iOS users worldwide, this gives Apple an instant mass-market AR-ready customer base overnight.

I’m excited to learn to design for VR, more specifically augmented reality (where a computer-generated image displays over a user’s view of the real world).

But where to start?

  • Do I need to buy new kit, or can I experiment using my regular MacBook and iPhone?
  • Proper headset or Google cardboard?
  • What platform should I use?
  • What is Mozilla A-Frame? Daydream VR? Unity VR? Can I access these tools with my limited coding knowledge? Help!
  • What input methods can I rely on?
  • Can my regular UI design tools like Sketch help me?
  • What is my canvas size? Can I even assign 360 degrees a pixel value? Am I really stupid for asking?

I decided to begin my journey into the VR unknown with A-Frame. A-Frame is an open-source web framework for building VR experiences, maintained by Mozilla and the WebVR Community.

With my current skillset this seemed to offer the lowest barrier to entry as A-Frame can be developed from plain HTML files without having to install anything. I can code basic front-end so this seemed a logical first step; the WebVR community also seemed a kind and welcoming place for a clueless newb.

To kick-start my making I did a short workshop called Imperfect VR, an A-Frame course by games designer and creative coder Michael Straeubig. The session offered the chance to make “a small, quirky VR experience with A-Frame and Google Cardboard” aimed at complete beginners. Perfect! The most valuable part for me was the setup and how to get started; downloading sample code, viewing this on a live server and the magical bit – getting it to work on your phone to experience through Google cardboard. Michael provided a basic HTML setup which we quickly transformed into our first ‘hello VR world’ experience.

I thought I’d document the process here before I forget all the steps. Not sure if anyone else actually cares, after a sunny afternoon spent inside a dark gallery space even I feel like I’ve hit peak geek.

1. Install and set up:

  • Download some sample code like this ‘hello world’ boilerplate from Github.
  • Install a code editor if you don’t have one already. We used Atom.io which is free and easy to use.
  • Drag your boilerplate folder into Atom and open the index.html file.
  • Next you need to add live server functionality to Atom by installing a package. Stay with me, it only sounds technical. Go to:
    Atom > Preferences > + Install and search for live-server.
    Select atom-live-server from the list. Then in the top nav choose
    Packages > atom-live-server > Start server. This will open your index.html file in your browser.

Installing live server with Atom

atom start live server

Start live server to view your experience in the browser

2. Get tinkering:

If you know some HTML then A-Frame is fairly muppet-proof. Here’s the basic setup –


<a-sphere></a-sphere> Gives you a sphere
<a-box></a-box> You guessed it: a box
<a-cylinder></a-cylinder> Righto
<a-plane></a-plane> The ground objects sit on
<a-sky></a-sky> The background that wraps around the whole 360.
<a-entity position=” “><a-camera></a-camera></a-entity> Where you (the camera) are initially viewing the scene from.


A-Frame elements

A-Frame elements. Source: aframe.io

You then build this out with various attributes as you would with HTML. For eg –
<a-cylinder position=”1 0.7 1″ radius=”0.5″ height=”1.5″ color=”#FFC65D”></a-cylinder>

You can also add images which wrap around your 3D objects or background. To add a background to the whole piece, download an image into the same folder and add an src like you would a regular image –
<a-sky src=”clouds.jpg”></a-sky>

basic code to started

Basic code to started

3. View it on your phone:

  • Ensure both your phone and computer are on the same wifi network.
  • Find your IP address. On a mac hold down Alt and click the wifi icon in your mac’s menu bar, your IP address will display in the wifi dropdown.
  • Type your IP address into your phone’s browser, followed by :3000. The 3000 needs to correspond to the port number in your browser’s address bar. If the number is different change accordingly.
  • Hang around for a bit, this can take a few minutes to work.
View on your phone

Our objective was ‘VR face’ like the dude at the bottom

Et voila, VR on your phone! Pop into a Google cardboard and admire your handiwork.

View on Google cardboard

Feel like a real coder (rather than a shabby VR imposter).

A brilliant workshop, would highly recommend. Now to get experimenting. Onwards!