WireWhiz

WireWhiz

Where I share my coding adventures.

Getting Started Programming Mobile VR For FREE With AFrame

Posted on Author lightningDalekPosted in Mobile VR, tutorials

Hi, you’re here because you want to make mobile VR apps. For these tutorials I am going to be using PhoneGap and AFrame, though, they should work for just AFrame.

PhoneGap

I suggest using PhoneGap to prototype your apps. It just makes everything easier, you don’t need it to make apps but it just makes your life easier.

PhoneGap is a free program that allows you to create HTML5 apps for any device and preview them.

follow these steps to download it.

AFrame

AFrame is a free programming library for VR and 3D graphics. It is compatible with every major VR headset out there, including mobile phones.

see their documentation here.

Getting Started

Ok, finally we get to the good stuff, how to actually use these programs. I have a super fast, (kind of lacking), tutorial on how to get a hello world program up in 10-15 minutes you can see here. but if you want a more detailed and in depth explanation stay here. To get started, download the PhoneGap desktop app here, also download the mobile version of the app on your respective app store. Now that you’ve done that open the desktop app and you should see something like this:

Blank phonegap

Next you want to press the big plus button and create a new blank project. You then name it anything you want, I named mine Hello VR, Then click Create Project.

creating a project

Now Click the link at the bottom of the project, this will open the file where the project is stored:

link location

Open the index.html file inside the www folder using your favorite programming editor, I use visual studio, then you should see this:

<!DOCTYPE html>

<html>
  <head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
   <title>Blank App</title>
 </head>
 <body>
   <script type="text/javascript" src="cordova.js"></script>
 </body>
</html>

Now for the fun part! Delete everything in index.html. Then go to the AFrame documentation and copy the example program and past it into your index.html:

<html>
  <head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

You also want to put the code: <script type=”text/javascript” src=”cordova.js”></script> into the head of your program, this will enable you to use your phone’s features.

Testing

To test your app, open the PhoneGap app on your phone and you should see this:

App example

Enter the web address displayed at the bottom of the desktop app into the box in the app and click enter.

app demo

This is the result. click the button in the bottom right corner to enter VR mode.

Congratulations! You just made your first VR app!


Liked it? Take a second to support WireWhiz on Patreon!
Become a patron at Patreon!