“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!!
GitHub repository to be followed: 360° VR Web App
VR view from Chrome browser
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/
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.
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!!
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!