Capture and embed VR 360 images

Create 360 images with nothing more than your smartphone and publish them on the web

by Stefan Kaltenegger 04/18/2016

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.

Info
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.

View CodePen View Demo

Taking the 360 image

For iOS and Blackberry:

  1. Install the 360 panorama app on your phone and open the app
  2. Take panorama image by tapping on the green start button and move your phone around to reach all of your surrounding area
  3. Tap on “Done” after your photo is finished
  4. 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.

360-app-screens

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:

<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></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:360-web-vr

Example in CodePen

On mobile devices, view the CodePen result here.

See the Pen Embedding 360 images with A-Frame by Stefan Kaltenegger (@kaltee) on CodePen.

Credits and references

360 panorama app by Occipitialhttp://api.occipital.com/360/app

A-Frame by MozVRhttps://aframe.io/