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
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    Sexy Album Art with MooTools or jQuery

    The way that album information displays is usually insanely boring. Music is supposed to be fun and moving, right? Luckily MooTools and jQuery allow us to communicate that creativity on the web. The XHTML A few structure DIVs and the album information. The CSS The CSS...

  • By
    MooTools Link Fading

    We all know that we can set a different link color (among other properties) on the hover event, but why not show a little bit more dynamism by making the original color fade to the next? Using MooTools 1.2, you can achieve that effect. The MooTools...


  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!