Discover Master of Alchemy, our first iPad/iPhone and iPod touch game!

Follow Me


Forum's topics

Latest Files


Top Rated


Photo Gallery

Alessandro Crugnola on March 1, 2007 in actionscript

Panoramic 360 with Papervision3d

Just before leaving for holidays I did a little test using papervision3d again, but then I forgot to post the result here...

Being able to parse 3dmax collada files and apply texture to its 3d objects I thought that with is probably the best and easiest way to create simple image panoramic viewer.

I first downloaded a trial of 3d Studio Max,  then I created a simple sphere (see the image) and attached an image as texture.
You can see here a screenshot of the resulting 3d object.

The next step is to download and install collada export for 3dsmax from Feeling Software and export the 3ds scene as collada file.

Now in flash create a new fla file with the same image used in the 3ds max file in library. Then just tell papervision to load the .dae file and associate the library image to the sphere object. You don't have to worry about anything else :)


Move mouse to navigate the panorama:

Flash content here

Here the script I used in the as:

	import flash.display.*;
	import flash.geom.*;
	import flash.ui.*;
	import org.papervision3d.scenes.*;
	import org.papervision3d.objects.*;
	import org.papervision3d.cameras.*;
	import org.papervision3d.materials.*;
	public class main extends Sprite
		private var container:Sprite;
		private var scene:Scene3D;
		private var camera:FreeCamera3D;
		private var rootNode:DisplayObject3D;
		private var DaeMaterials:Object;
		private var center:Point;
		private var rotating:Boolean;
		private static var MAX_X_ROTATION:int = 12;
		private var keyRight   :Boolean = false;
		private var keyLeft    :Boolean = false;
		private var keyForward :Boolean = false;
		private var keyReverse :Boolean = false;
		public function main()
			center = new Point(0,0);
			this.addEventListener( Event.ENTER_FRAME, loop3D );
			this.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownHandler);
			this.addEventListener( MouseEvent.MOUSE_UP, mouseUpHandler);		
		private function mouseDownHandler(evt:MouseEvent):void
			center.x = container.mouseX;
			center.y = container.mouseY;
			rotating = true;
		private function mouseUpHandler(evt:MouseEvent):void
			rotating = false;
		private function init3D():void

			this.container = new Sprite();
			addChild( this.container );
			this.container.x = stage.stageWidth/2;
			this.container.y = stage.stageHeight/2;
			this.scene = new Scene3D( this.container );
			camera = new FreeCamera3D();
			camera.x = 0
			camera.z = 0
			camera.zoom = 1;
			camera.focus = 200;
			DaeMaterials = new Object();
			var bmpMaterial:BitmapAssetMaterial = new BitmapAssetMaterial( "greece.jpg" );
			//var testMaterial:WireframeMaterial = new WireframeMaterial(0x000000, 100);
			//testMaterial.doubleSided = true;
			bmpMaterial.doubleSided  = true;
			DaeMaterials.mymaterial = bmpMaterial;
			rootNode = scene.addChild( new DisplayObject3D( "rootNode" ) );	
			rootNode.addCollada( "sphere.dae", new MaterialsList( DaeMaterials ) );
		private function loop3D( event :Event ):void
			var sphere:DisplayObject3D = this.rootNode.getChildByName( "Sphere01" );
					camera.rotationY += (container.mouseX - center.x)/25
					camera.rotationX -= (container.mouseY - center.y)/25
					if(camera.rotationX > main.MAX_X_ROTATION) camera.rotationX = main.MAX_X_ROTATION
					if(camera.rotationX < -main.MAX_X_ROTATION) camera.rotationX = -main.MAX_X_ROTATION

			this.scene.renderCamera( camera );


Bookmark and Share


Tags: 360 , panoramic , papervision 


The issue with the distortion is you need a picture taken with a fish eye lens in order to map it correctly.
I think if you use a wider shape rather than a sphere it will distort much less...let's say a donut or "torus" shape in example which also is tall enough to receive the attached photograph on an almost "flat" surface... cheers !!
I received the same error I believe it has something to do with PPV3d version, since the code here is old and we are trying it on PPV 3d v 2.0
I received the same error I believe it has something to do with PPV3d version, since the code here is old and we are trying it on PPV 3d v 2.0
Hey, I love the way how you create the panoramic. I am also trying to work this out but i get the following error. The addCollada() method has been deprecated. Use addChildren( new Collada( filename ) ) I copy the collada file. I copy my image in the libary and give it a class name. I get the feeling that i forget something.
I recently was able to convince Andr´┐Ż Michelle of creating a Flash version of Apple's CubicVR features. You can see the results here (MUCH less distortion - none in fact).
isn't that a monastery in Alonissos? The image should be flipped and I would say it is actually my panorama because it looks really identical :P Nice one Alessandro :)
Adjusting the Camera focus/zoom the distortion can be changed and maybe it will be more real too. I've seen the cube panoramic example but I thought it was more obvious to use a sphere to recreate that effect.. Anyway I will try using the primitives too, since I'm still really a newbie with papervision and trying to experimenting. Thank you
It looks good - however I have a few questions. Firstly the distortion is a bit extreme - I'm wondering whether this is largely to do with original type of panoramic image you mapped onto the sphere. Secondly - why a sphere? everyone has seen the cubic pano example of papervision and apart from some nasty 'wibbling' distortion of certain straight edges it works really well and is how QTVR works (at least some QTVR movies) - although abviously a sphere is more obvious (PV3D has some primitive classes now so you don't need the collada model I think - from the mailing list) I think the biggest trick to making these panos work well is to get your images correctly 'distorted' prior to mapping them to the sphere/cube - anybody have any good ways to do that using standard tools?

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Type the characters you see in the picture above.



TrackBack URL for this entry: