Google Earth WebVR
What
I compiled some of my favorite places on the planet into 360 degree photos that can be viewed in VR from a web browser. The photos are accessible by any VR platform (Vive, Cardboard, Oculus, etc).
Why
In three weeks, The GenerationExchange will hosting a workshop for seniors and technology at our studio. While the focus will be mainly on the basics, I want show off some of the other awesome things we have access to in the studio like the vinyl cutter, 3D printer, and VR. I will use this site to show how easy it is to make VR accessible through web and viewable on phones.
How
To create find the images I turned to Google maps and began exploring the globe. I used a program called Street View Download 360 to take 360 degree photos of some awesome places I found.
Once I had the photos I made a page to host them. I made each photo its own page, and an index.html page to navigate between them.
The code for each individual page looked like this.
<a-scene>
<a-sky src="stonehenge2.jpg" rotation="0 -130 0"></a-sky>
<a-text font="kelsonsans" value="Stonehenge" width="6" position="-2.5 0.25 -1.5"
rotation="0 15 0"></a-text>
</a-scene>
The 360 degree image is placed in the scene’s <sky> tag. That creates the environment for users to look around the image captured from Google Earth.
All of the pages are linked to the home page. On there, I simply used <iframe> to create links to each page. All of the pages are viewable in that page. The code:
<div id="container">
<h1>Planet Earth is Awesome </h1>
<h2>Volcano in Vanuatu</h2>
<iframe src="Volcano.html" allowfullscreen="yes" allowvr="yes"></iframe>
<h2>Stonehenge</h2>
<iframe src="stonehenge.html" allowfullscreen="yes" allowvr="yes"></iframe>
<h2>Penguins in Antartica</h2>
<iframe src="penguins.html" allowfullscreen="yes" allowvr="yes"></iframe>
<h2>Mt. Everest</h2>
<iframe src="everest.html" allowfullscreen="yes" allowvr="yes"></iframe>
<h2>The Great Barrier Reef</h2>
<iframe src="deepsea.html" allowfullscreen="yes" allowvr="yes"></iframe>
</div>