How anyone can build a Virtual Reality App under 10 minutes
In this tutorial, I’ll help you create your own first virtual reality (VR) app :
- under 10 minutes
- only with 14 lines of code
- by just using any modern web browser (e.g. Chrome or Mozilla Firefox)
- without any external software installation
- even if you don’t have any coding background/knowledge
- and totally FREE
Introduction
At the end of this tutorial, you would have created your first VR app or to be precise WebVR like the video here.
As you can see the simulated 3D environment is inspired by Japan and you will be adding an object animation in the environment as well.
The cool part is that you can use your desktop, handphone or any VR devices(e.g. Oculus Rift/Quest or HTC Vive) to view the VR app that you have created.
Time for some action
If you are still wondering how you can create your own VR experience under 10 minutes, let me show how you can get it done in three steps. To create a webVR app, you would need an Integrated Development Environment(IDE). Normally most of the IDEs will require installation in their PC/laptop, in order to write, build and run their application.
Like I promised there will be no installation required to build your first VR app. We are going to use an online development tool called Glitch. Glitch will allow you to write your codes and run your webVR app on their platform without any hassle. So this has shortened our time required to build and run an application.
To make development even faster and efficient, we are going to need a VR framework. A framework, in this case, is like cooking utensils for your cooking. All you have to do is to focus on finding the right ingredients needed to make your meal without worrying about the tools needed to cook it. The framework that we will be using here is called A-Frame. A-Frame is an open-source(free) framework to build virtual reality experiences.
Steps:
- Setting up Glitch
Now go to the Glitch website by clicking the underlined Glitch here or just by googling glitch in your browser. The Glitch main website will look like the image below and all you have to do here is just click on the “New Project” button and then on the “hello-webpage”.
After you have clicked on the “hello-webpage” button, a sample web page will be created for you to edit and run your app.
Now you will only need to navigate to the index.html file to make the magic of VR happen for this tutorial.
Once you are in the index.html page, make sure you delete all the content/codes in that file, so that we can start writing the code from the beginning. Once you have an empty index.html file, we are done setting up the development platform. Good job!
Now it’s time to code! Before we get into writing the code, let’s familiarise ourselves with A-Frame.
2. Getting familiar with A-Frame
A-Frame, as a web framework, allows us to use HTML(Hypertext Markup Language) to create VR experiences. For your information, HTML is a computer language which is mainly responsible for the creation of the structure of a webpage.
A-Frame was originally developed by the team in Mozilla and now it’s currently maintained by the team from Supermedium. At the moment, A-Frame managed to gather a huge VR community around them as it enables the creation of VR content with ease and without much complications.
So let us start creating the structure of our VR web page using HTML in the index.html file.
<!DOCTYPE html>
<html>
<head>
<title>Hello My First VR!</title>
</head>
<body></body>
</html>The above HTML code is the structure of our first VR web page. The <!DOCTYPE html> declaration must be the very first thing in your HTML file, as it alerts the browser on the version of the HTML file.
Next, we will declare <html> tag to inform the browser that we are using HTML in this implementation. We also have to close the HTML content of our code with the closing tag </html>.
After that, we will have to continue the standard structure of an HTML by declaring <head> and <body> tags with their respective closing tags. Commonly we use the <head> tag to give a title for our web page. So in this case, we will use the <title> tag to name our web page with “Hello My First VR!”. You can name it any way that you want as well. Don’t forget to close it with </title> .
Now we will integrate the latest A-Frame version in the HTML by inserting
<script src=”https://aframe.io/releases/1.0.4/aframe.min.js"></script> using the <script> tag within the <head> tag. Next, we will need to insert one more script from Feiss where it allows us to create the 3D environment of Japan with just one line of HTML code:
<script src=”https://unpkg.com/aframe-environment-component@1.1.0/dist/aframe-environment-component.min.js"></script>The following script tags can then be added in the index.html file as follows:
<!DOCTYPE html>
<html>
<head>
<title>Hello My First VR!</title>
<script src=”https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src=”https://unpkg.com/aframe-environment-component@1.1.0/dist/aframe-environment-component.min.js"></script>
</head>
<body>
</body>
</html>In order to add the 3D environment and the rotating object(dodecahedron) from the A-Frame components, all we have to add are <a-entity> and <a-dodecahedron> tags within a scene tag, <a-scene>. We will insert the parameters required to create the 3D environment of Japan in the <a-entity>
<a-entity environment=”preset: japan”></a-entity>and the rotating element in the <a-dodecahedron>.
<a-dodecahedron position=”0.75 1 -5" animation=”property: rotation; to: 0 360 0; loop: true; dur: 5000" height=”4" color=”#D4AF37" radius=”1" shadow></a-dodecahedron>If you want to change the colour or the speed of the rotating object, you can easily do that by adjusting the color parameter or dur parameter.
The following codes will be inserted in the <body> tag where the body tag is responsible for the main content of HTML.
<!DOCTYPE html>
<html>
<head>
<title>Hello My First VR!</title>
<script src=”https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src=”https://unpkg.com/aframe-environment-component@1.1.0/dist/aframe-environment-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity environment=”preset: japan”></a-entity>
<a-dodecahedron position=”0.75 1 -5" animation=”property: rotation; to: 0 360 0; loop: true; dur: 5000" height=”4" color=”#D4AF37" radius=”1" shadow></a-dodecahedron>
</a-scene>
</body>
</html>3. Time to test your VR app
Click on the “show” button like in the image below and then on the “In a New Window” button to witness your first VR app!
The amazing part is that you can now share the above Uniform Resource Locator (URL)/Website link with your friends to witness your first VR app.
The URL from my tutorial is https://a-frame-tutorial-v01.glitch.me/. You can use the above URL in your handphone to view it in VR mode(for example by putting your handphone in a Google Cardboard or VR box) or any VR devices that you possess just by inserting the URL in the respective VR browsers.
CONGRATULATIONS! You have successfully created your first VR app!
What’s next?
If you are interested in further tinkering of my code, you can do so at my Glitch profile and I have posted the complete code here as well.
Please feel free to comment in this post if you have any question with the tutorial.
You can connect with me at LinkedIn for further inquiries :)
