I decided to start 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.
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-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.
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 –
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.
Et voila, VR on your phone! Pop into a Google cardboard and admire your handiwork.
A brilliant workshop, would highly recommend. Now to get experimenting. Onwards!