Creating a Spherical Panorama in Papervision

Panoramas are both fun and easy to create in Papervision. You rez a cube or sphere on the stage and put an image on it. You then place a spinning camera in the center. That’s all there is to it!

So what’s the secret behind a great panorama?

The secret of making great panoramas is in using great images. In an upcoming series Amanda Verette (one of my graphic designers) will be posting a series of video tutorials on how to create fantastic spherical images using a fish eye lens and various photo editing tools. But until then I’ll explain the Papervision code.

Here’s one of Amanda’s spherical photos. Click on the image to see the Papervision Panorama in action.

Spherical Panorama Image

Spherical Panorama Image

Demo: http://www.professionalpapervision.com/demos/web/sphericalpano/

Source: SphericalPano.zip

YouTube

Coding a Panorama is simple. Download the full source code by clicking the source link above, and click the more button below to see how it works.

After all the typical Papervision Imports and declarations, embed the panorama swf in your Flex project using the following code (Amanda will show you how to make an swf out of your spherical image in an upcoming video)

[Embed(source=”assets/ampitheaterPanoWeb.swf”)]
private var panoAsset:Class;

Next create the Pano Material to be placed on your sphere

//Create the pano material
var movieAsset:MovieClipAsset = new panoAsset();
sphereMat = new MovieMaterial(movieAsset, false);
sphereMat.opposite = true;
sphereMat.animated = true;

Then place that material on a Sphere and add the Sphere to your scene

//Create the panosphere.
panoSphere = new Sphere(sphereMat, 25000, 30,30);

scene.addChild(panoSphere);

The dimensions of your sphere are important and you will have to play around with optimization and sphere radius a bit. The numbers above work well for our image. At a minimum use the C=2PI*r rule to find the radius of your sphere using C the circumference of your sphere as the width of your image.

But in Papervsion pixels lose some meaning due to how perspective is calculated. So after doing the calculation above make adjustments so it looks good.

Then add your camera to the center of your Panorama

//position the camera in the center of the sphere, and set it’s properties for focus and zoom.
camera.x = camera.y = camera.z = 0;
camera.focus = 300;
camera.zoom = 2;

You’ll need to play around with focus and zoom until it looks good.

Finally set your camera motion based on mouse movement. In our case, the pano moves to where you click and hold the mouse button.

camera.rotationY = camera.rotationY + (mouseX – stage.width / 2) / 50;
camera.rotationX = camera.rotationX – (mouseY – stage.height / 2) / 50;

That’s really all there is to it. Download the source code. Try it out. Have fun!

About these ads

9 Responses to Creating a Spherical Panorama in Papervision

  1. Dimitris says:

    Thanks for this. I can’t wait for Amanda’s tutorial though!

  2. paul says:

    Thanks Mike! This will really come in handy.

    We’re planning to make a panoramic image of our church resource center.

    Also excited to see Amanda’s tutorial. :)

  3. […] is essentially a combination of the button panel and panorama discussed in previous posts. But if you put them together they will not work. The button panel has […]

  4. Joshua says:

    Hey!!!! awesome tutorial, your right it’s extemely simple! Here’s the thing… Is it possible to place listeners on portions of the sphere for the user to click? Links and what not?
    Thanks, i know this is a couple months past the last comment i really hope you can help me with this.
    Joshua Gaudette.

    • Mike Lively says:

      Oh sure! It’s just 3D space. You can put a listener anywhere. You just need to keep track of where it is. I’ll try to get something up on this in the next few weeks. Thanks for asking!

  5. Sacen says:

    Hey Mike

    Thanks for the tutorial, it’s really useful for my next assignment. I would love to know how you can add button and stuff to interact in the 3d space : )

    Sacen

  6. Steve Pidgeon says:

    Very Cool!

    For a cylindrical you do what? Change the sphere to a cylinder? And do what?

  7. David says:

    Hi
    Thanks for this very easy to follow example. I have managed to add basic hotspots by creating a new plane and adding a listener like
    plane. addEventListener ( InteractiveScene3DEvent. OBJECT_PRESS , onMDown ) ;
    but am a bit stuck as to what to do with my onMDown function due to the way you embed the swf. Any ideas?

  8. David says:

    I have just re read my earlier post and it probably doesn’t make sense. What I am trying to do is use the hotspot to load a different swf.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: