Capture and embed VR 360 images
Create 360 images with nothing more than your smartphone and publish them on the web
In this tutorial l’ll show you how to easily create 360 images with nothing more than your smartphone. You will learn an easy way of how to publish the 360 panorama images on your website with the help of A-Frame.
A-Frame enables you to view 360 content on mobile devices via device orientation and on desktops via mouse interaction. A Google Cardboard view for smartphones is available.
Taking the 360 image
For iOS and Blackberry:
- Install the 360 panorama app on your phone and open the app
- Take panorama image by tapping on the green start button and move your phone around to reach all of your surrounding area
- Tap on “Done” after your photo is finished
- Tap on “Share” and either “Email Flat” or “Camera Roll” to export the image. Make sure to send the image to your workstation for further use.
Embedding the panorama image
Now that we have our finished panorama image, let’s embed it in a website with the A-Frame virtual reality framework. The following CodePen shows you how to achieve this.
At first, lets include the A-Frame Script:
The core element is the a-scene:
<a-scene canvas="" keyboard-shortcuts="" vr-mode-ui=""> </a-scene>
Add the path to your 360 image in the a-sky element:
<a-scene canvas="" keyboard-shortcuts="" vr-mode-ui=""> <a-sky src="http://tutorials.stk.works/examples/assets/idm-pano.jpg" rotation="0 -130 0"></a-sky> </a-scene>
Below you can see an image of the WebVR view on a smartphone:
Example in CodePen
On mobile devices, view the CodePen result here.