Create a 3D Panorama Image with A-Frame

In the five years I've been at Mozilla I've seen some awesome projects.  Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and A-Frame project have.

A-Frame is a community project aiming to be "building blocks for the virtual reality web", a library for creating VR experiences within the browser using markup or JavaScript.  Jumping into using a project like this can be overwhelming so let's start simple:  creating an interactive panorama image demo like this one!

Taking a 3D Image

The easiest way to take an image that satisfies the panorama effect requirement (known as an equirectangular format) is by using your phone.  Dan Zajdband's Guri VR: Virtual Reality for the Rest of Us identifies apps for iOS (Google Street View) and Android (Photo Sphere or Cardboard Camera).  Dan's awesome article also points out an Equirectangular group on Flickr if you'd prefer to simply grab an existing image for your experimentation.

Taking a quality image on your phone can be a bit of a challenge -- you'll need a steady hand to avoid jagged edges as you rotate your phone to take images at each position.

Quick note: for the demo I'm using the sample image provided by A-Frame because Google Street View's image generated a 10MB image and serving that to you would be a beast. If you'd like to see what I made using the GSV app, you can find the image here. The image is taken from the viewpoint of me standing in the middle of the cul de sac I live on.

Creating the Panorama Effect with A-Frame

Believe it or not, taking a good image is the hard part, because A-Frame makes turning the image into a 3D visualization incredibly easy.  The <a-sky> element within A-Frame will be used to create the panorama effect:

<a-scene>
  <a-sky src="https://davidwalsh.name/demo/3d-image.jpg" rotation="0 -130 0"></a-sky>
</a-scene>

The code above is declarative usage (written in HTML) of A-Frame; you could use programmatic JavaScript to create the element instead:

// Create the scene
var scene = document.createElement('a-scene');

// Create the sky
var sky = document.createElement('a-sky');
sky.src = '3d-image.jpg';
sky.setAttribute('rotation', { x: 0, y: -130, y: 0 });

// Inject into page
scene.appendChild(sky);
document.body.appendChild(scene);

The rotation attribute accepts space-separated x, y, and z axis rotation values; you can play with those to customize the positioning of the viewpoint.

A-Frame lets you click, hold, and drag the component to rotate around the image.  You can also click the VR goggles image to view the image in 3D on your phone (cardboard makes a nice accessory!) or WebVR-enabled browser.

A-Frame Makes 3D Easy!

I wasn't exaggerating when I said that taking the photo was the difficult part; the amount of markup needed to create a 3D panorama effect is minimal when you harness the power of A-Frame.  While panorama image creation is a popular use case, the effect is only a simple usage of A-Frame.  Want to see what else A-Frame can do?  Check out the demos on the A-Frame website and look forward to seeing more about WebVR all over the web -- it's the next big thing!