Create a 360° VR supported Web experience in under 5 minutes

“Virtual reality is the ‘ultimate empathy machine.’ These experiences are more than documentaries. They’re opportunities to walk a mile in someone else’s shoes.”— Chris Milk

Virtual reality (VR), augmented reality (AR) and mixed reality (MR) are the fastest growing domains in the world of immersive technologies. The need of installing bulky applications, in order to experience immersive technologies will soon be dominated by the web-frameworks emerging in the market.

Among the rapidly growing immersive technology web frameworks, A-Frame is reasonably good for creating VR experiences with its ease, simplicity and powerful entity-component framework. By the end of this post, you will learn how to develop your own 360° VR supported Web experience application using A-Frame in under 20 lines of HTML code!!

Demo: https://narendra-kamath.github.io/demo/webvr-360-example

GitHub repository to be followed: 360° VR Web App

VR view from Chrome browser

What do we need to Get Started?

1. 
   

   A-Frame: We’ll be using this framework for the support of VR in our web application. We can either download the A-Frame JavaScript bundle or we can use the CDN link of A-Frame.Download: https://aframe.io/releases/0.8.0/aframe.min.js

2. 
   

   
   

   Equi-rectangular Image: This is the 360° image that we are going to display in our web application. In this example we will be using Mysuru Palace 360°capture. (Feel free to use any image of your choice)Download: Mysuru Palace 360°captureAdd: https://www.flickr.com/groups/equirectangular/

Creating the Application

We’ll create a dedicated folder for this application and we’ll create an index.html file inside this particular folder. A folder by the name images is also created for storing the image that we are going to display in our App.

In this example, we have downloaded the A-Frame JavaScript file and we have saved it in the folder named js. For creating a VR scene on a plain HTML file, we’ll include the A-Frame element called as a-scene. The a-scene element of A-Frame will handle all the necessary WebVR boilerplate. Within the a-scene element, we will include an a-sky element. The A-Frame sky primitive is used to add either a background color or a 360° texture to the scene. We are going to give a reference to the saved image using the src attribute of a-sky. This will create a basic 360° rendering scene. The specialty of the created scene is that, for the devices that has the support of gyroscope, the rotation of the scene is possible with the device movement.

Bonus: Now we are going to add a few text items to the scene, with three dimensional positioning using the element called as a-text. The font attribute for a-text element is optional. Finally, the text that we are going to display in the scene, is given as a value for the ‘value’ attribute of respective a-text elements. Done!!

Result

Desktop view of the application

Congratulations we have successfully created a 360° VR supported Web experience application using A-Frame within a few minutes and with ease. The same example can be improvised in many other ways, for various other applications ;) Happy development!!

Kindly share your views in the responses section :) Thank you!

References:

• Get started with A-Frame
• A-Frame Examples