I presented this simple panoramic example at the July PittMFUG meeting last night. The main focus of my presentation was to show how BasicView makes it much easier to start playing with Papervision3D.
The source files are posted on the PittMFUG blog, but here’s a little more explaination to go along with them.
The Image(s)
This is a very simple panoramic but it’s still a little tricky to get images that will work properly. For this type of panoramic you’ll need a really long image when the two ends match up. There’s a number of stiching programs out there you can get to do all the hard work for you. Since taking photos for a panoramic is a whole different topic that is far from simple, I’m not going to get into that at all. Instead, I turned to flickr and found this great panoramic image from zanemerva. (thanks!)
Once you have your image, you need to cut it up into four equal pieces for the 4 sides of the cube we’ll be putting the images on. My four images looked like this:
The code
The code is actually pretty simple. Main.as is the document class for pan.fla and basically does nothing more than import the SimplePan class and add an instance of it to the display stack. Nothing fancy. It’s there mostly because I like to re-use it for differnent papervision experiments.
SimplePan.as has all the important stuff and it’s pretty self explanitory with all the comments. The only “trick” to note is that the images are all in the library of the .fla file and have been given linkage ids (pan01, pan02, pan03 and pan04).:
[as]
package
{
/*
Simple Panoramic Example for the PittMFUG July 08 meeting
val | thisisportable.com
*/
import org.papervision3d.view.BasicView;
import org.papervision3d.materials.BitmapAssetMaterial;
import flash.events.*;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
public class SimplePan extends BasicView
{
public var cubemap:Cube;
public var materials:MaterialsList;
//The Constructor
public function SimplePan() {
super(600,300,true,true); // width, height, scale to stage, interactive, (camera)
initScene();
}
private function initScene():void {
//Start rendering.
startRendering();
//set up the materials list — it looks more complicated than it really is
var pan01:BitmapAssetMaterial = new BitmapAssetMaterial(“pan01”, true);
var pan02:BitmapAssetMaterial = new BitmapAssetMaterial(“pan02”, true);
var pan03:BitmapAssetMaterial = new BitmapAssetMaterial(“pan03”, true);
var pan04:BitmapAssetMaterial = new BitmapAssetMaterial(“pan04”, true)
var col1:ColorMaterial = new ColorMaterial(0x000000, 1, false);
var col2:ColorMaterial = new ColorMaterial(0x000000, 1, false);
materials = new MaterialsList({
front: pan01,
back: pan03,
left: pan04,
right: pan02,
top: col1,
bottom: col2
});
//set up the cube : materials, width, depth, height, segments…, inside faces
cubemap = new Cube(materials, 500, 500, 240, 5, 5, 5, Cube.ALL);
scene.addChild(cubemap);
//set up camera
camera.z = -5; //default is -1000
camera.x = 0;
camera.y = 0;
camera.zoom = 8;
camera.lookAt(cubemap);
}
// this is required when extending BasicView
override protected function onRenderTick(event:Event=null):void
{
cubemap.yaw( -((viewport.mouseX – (stage.stageWidth / 2)) / stage.stageWidth)*4);
super.onRenderTick(event);
}
}
}
[/as]
Grab the source files to take a closer look.
