Kick off to building a simple VR experience

As a creative professional, I’ve had to push my comfort zone time and time again to learn new technologies, workflows, systems, you name it. I’ve always found that the best way to learn is to DO. It’s far too easy to get caught in an endless cycle of reading books and articles because it feels good to gain knowledge and it definitely helps you create frameworks to understand different aspects of the world but the true magic of skill acquisition is in application and practice.

That being said, I set out on a brief journey to discover how one can quickly go from concept to actually pushing their first VR experience into the cloud. This tutorial should help get you started on your path to designing VR experiences in the most rudimentary of ways. After all, for VR to be successful, we will need to educate and inspire the current and next generation of creative professionals to create compelling content for the platform. We’ll need the same talented individuals to use the platform to create the future of fitness with VR. Without further ado, lets dive in.

It’s far too easy to get caught in an endless cycle of reading books and articles…the true magic of skill acquisition is in application and practice

Get your VR viewer

There are more and more VR devices popping up and they run quite a spectrum. From the cheap and easily accessible Google Cardboard to the VR setups requiring a few thousand dollars to get you started. High end systems like the HTC Vive and Oculus Rift are the BEST possible solutions on the market today for VR due to their low latency and the frames per second they boast. After all, high refresh rates can reduce the chance of motion sickness in VR. Google Cardboard on the other hand is run off of your smart device (iPhone / Android) and these devices don’t have the large amount of computational power that the systems built for the Vive and Oculus have.

However, for this tutorial, I wanted to use a setup that is accessible to most the least costly, so I am going to be using a smartphone (iPhone or Android) and Google Cardboard (Cardboard supports most Android or iOS phones with screen sizes from 4 to 6 inches).

Get the Software

Now that you have your smartphone ready and you’ve purchased your Google Cardboard headset you need to get the software to start building your first VR environment. The software I will be using is called Unity. I like Unity because it is free for non-professional use and since we are just practicing, it will work perfectly for us. Download the free version of Unity here

Unity Logo

I also want to make it easy for you to publish your VR experience without having to go through an app store, so we’ll be viewing our VR environment in a mobile browser on our smartphone, that we’ll then put into the Google Cardboard. That being said, you’ll need to have an ftp server you can publish to (like a hosted website). I’m going to be using CyberDuck to connect to the site. We’ll get to that later.

One Final Download

Now that you have your smartphone, Google Cardboard, Unity installed, CyberDuck installed, and an ftp server to host your code on, there is one last thing to download and it comes from a brilliant developer on github and it’s called UnityAFrameExporter. Unity doesn’t currently make it easy to export to A-Frame (a web framework for building virtual reality experiences.) So we are going to download the UnityAFrameExporter from github (I downloaded it as a .zip file). Go ahead and do that now.

Ok we officially have everything we need to get our first VR experience opened in Unity, exported to html and javascript code via A-Frame and viewed on our smartphone device in our Google Cardboard.

Putting it all together

1.) Unzip the file.

2.) Open Unity and click “Open” and select the folder you just unzipped. It should now be named “UnityAFrameExporter-master”

3.) Once Unity imports all the assets it needs and opens, you should see the Unity interface. Now click the “sample” folder in the project panel and then double click “sample” to open the project. See screenshot:

4.) Now that you’ve opened the sample project click “Main Camera” in the hierarchy panel and then from the Unity menu select GameObject>Align View to Selected. This will ensure you can see the objects on the scene.

5.) Sweet! You should now be able to see the sample scene. Without doing anything crazy and diving into Unity, we are going to export this scene and preview it in the browser right away! So in the Project panel in Unity click the “AFrameExporter” folder and then click the “AFrameExporter.asset” this will open some settings in the Inspector:

6.) Click the “Export” button in the inspector. This will Export the Scene as A-Frame code (html). It exports this into the “export” folder.

7.) Now all you have to do is use CyberDuck or any other ftp client to upload these files (images folder, index.html, and models) to your website to test. Once the files upload just navigate to the url you published them to with your smartphone, put your smartphone in your Google Cardboard and you can look around your environment!

Continued Learning and Resources:

I hope you enjoyed that brief tutorial of how to go from nothing to publishing and viewing a VR scene in less than an hour. Obviously this is just the beginning and now you should dive into the creation process in Unity. This is a great course on learning Unity and will go much more in depth on these topics. For VR Fitness to change our workouts and lives forever, we need the best and brightest minds exploring this new medium and creating amazing content. I hope this primer helps kick-start your VR creation enthusiasm! Thanks for visiting and we can’t wait to see what you create!



Previous articleBiking Towards the Future of Cycling with Everysight
Next articleCompanies to watch in 2017 for VR Fitness
Preston Lewis
Preston is the Co-Founder & Chief Creative Officer at Black Box VR. Preston is a fitness fanatic, UXUI junkie, product design ninja and product visionary. Preston has provided creative direction and product management to some of the largest brands in the world. His passion for amazing products and solving difficult design problems has earned him numerous awards for projects ranging from traditional print campaigns and packaging design, to chart-topping mobile applications with complex information architectures. After helping grow multi-million dollar brands, Preston decided to leap back into the world of entrepreneurship with a mission to combine his passions for technology, games, fitness, and changing lives, to create the future of fitness; with this vision, Black Box VR was born. When he's not creating new digital products and growing brands, he can be found enjoying paleo treats with his wife that she posts on her blog,, playing the guitar, singing, working out in VR and dreaming up the next tech innovation.