“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, 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!! A-Frame : 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? : 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. : A-Frame Download https://aframe.io/releases/0.8.0/aframe.min.js : 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) : : Equi-rectangular Image Download Mysuru Palace 360°capture Add 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 is also created for storing the image that we are going to display in our App. images In this example, we have downloaded the and we have saved it in the folder named . For creating a VR scene on a plain HTML file, we’ll include the A-Frame element called as . The a-scene element of A-Frame will handle all the necessary WebVR boilerplate. Within the a-scene element, we will include an 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 attribute of . This will create a basic 360° rendering scene. The specialty of the created scene is that, for the devices that has the support of , the rotation of the scene is possible with the device movement. JavaScript file A-Frame js a-scene a-sky src a-sky gyroscope : Now we are going to add a few text items to the scene, with three dimensional positioning using the element called as . 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 attribute of respective a-text elements. Done!! Bonus a-text ‘value’ 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
