Create a 3D Panorama Image with A-Frame

By  on  

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-sky src="" rotation="0 -130 0"></a-sky>

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

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

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • By
    Introducing MooTools NextPrev

    One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item.

  • By
    Using Dotter for Form Submissions

    One of the plugins I'm most proud of is Dotter. Dotter allows you to create the typical "Loading..." text without using animated images. I'm often asked what a sample usage of Dotter would be; form submission create the perfect situation. The following...


  1. Excellent show, I’ve been struggling with a number of libraries for attaining something similar, 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

    disclaimer: I am the developer of this lib.

  4. Maikel Almarales

    HI, i try all that you say, but when you load 360 image, really you lost the effect 3D, if you now how build that effect sbs with 360 images, please say me.

    PD: sorry for my english, i speak spanish

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