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.
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)
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);
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!