Embedding Google Cardboard Camera VR Photosphere with A-Frame

Early this year I started looking into the VR (Virtual Reality) web applications. Web browsers now natively support VR applications using WebVR JavaScript API. We can now design virtual worlds using markup language and connect them to devices such as Oculus Rift and Leap motion controller using just a web browser.

To hit the ground running with WebVR. I started an experiment to capture Hackerspace Phnom Penh using Google Cardboard camera app and display it using A-Frame framework. The Google Cardboard camera photosphere is not supported by A-Frame. But the positive responses to my query encouraged me to try an hack using A-Frame Panorama component.

Is it possible to embed Google cardboard camera image capture in a @aframevr powered site?

— Arky (@playingwithsid) December 17, 2015

And it works. Almost I had to tweak the scale setting a bit to try get the perspective right but it does work. The ideal solution is to create a A-Frame custom component, that I leave it for more skilled people.

The markup needed for this demo is simple, you can achieve this with one line.

<a-scene>
     <a-sky src="img/hackerspace.vr.jpg" radius="2400" scale="2 1 2"> </a-sky>
    </a-scene>

You can see the demo on Youtube or visit this webpage in an compatible web browser.