Create a 3D Panorama Image with A-Frame

By  on  
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!

Recent Features

Incredible Demos

  • By
    Add Controls to the PHP Calendar

    I showed you how to create a PHP calendar last week. The post was very popular so I wanted to follow it up with another post about how you can add controls to the calendar. After all, you don't want your...

  • By
    Styling CSS Print Page Breaks

    It's important to construct your websites in a fashion that lends well to print. I use a page-break CSS class on my websites to tell the browser to insert a page break at strategic points on the page. During the development of my...

Discussion

  1. Excellent show, I’ve been struggling with a number of libraries for attaining something similar http://www.gyro360.cl, thanks for the example’ll see how to apply it.

  2. Wow, these demo’s look great. Makes you think how far the web has come. Many moons ago, I helped out on a project putting panoramic views online for a chain of restaurants. This involved a special camera, a Flash developer and tons of javascript. It’s pretty amazing that you can now do it with a phone, a few lines of code and a JS library …

  3. Mistic

    For 360 panoramas specifically there is this full-featured library too https://github.com/mistic100/Photo-Sphere-Viewer

    disclaimer: I am the developer of this lib.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!