“Double Sided Plane” with Papervision

Here’s a little trick I learned from playing with After Effects (“postcards in space”, man).

If you’d like to have a double sided Plane object (playing card, flipping piece of paper, etc), simply create a DisplayObject3D instance, add your two sides as planes, push one side back a single pixel on the z axis, then rotate the DisplayObject3D item (which of course will rotate both front and back image as though they were a single item).

Of course this would probably make a little more sense in code form, so here’s a quick example:

/** 
* Example of a Double Sided "Card" with Papervision3D 
*/         

package {         

	import flash.display.BitmapData; 
	import flash.display.Sprite; 
	import flash.events.Event; 
	import flash.filters.DropShadowFilter;         

	//papervision 
	import org.papervision3d.materials.BitmapAssetMaterial; 
	import org.papervision3d.cameras.Camera3D; 
	import org.papervision3d.objects.Plane; 
	import org.papervision3d.objects.DisplayObject3D; 
	import org.papervision3d.Papervision3D; 
	import org.papervision3d.scenes.Scene3D;         

	public class CardExample extends Sprite { 
		private var container:Sprite; 
		private var scene:Scene3D; 
		private var camera:Camera3D; 
		private var card:DisplayObject3D; 
		public function CardExample() { 
			Papervision3D.VERBOSE=false;         

			init(); 
		}         

		private function init():void { 
			init3d(); 
			createCard(); 
			addEventListener(Event.ENTER_FRAME,render); 
		}         

		private function createCard():void { 
			// "Face" and "Back" are two bitmaps imported into .fla library 
			//and set to link for actionscript with those class names.         

			var faceMat:BitmapAssetMaterial=new BitmapAssetMaterial("Face"); 
			faceMat.oneSide=false; 
			var backMat:BitmapAssetMaterial=new BitmapAssetMaterial("Back"); 
			var face:Plane=new Plane(faceMat,0,0,2);         

			//push the face back one pixel in z space 
			face.z=1;         

			var back:Plane=new Plane(backMat,0,0,2);         

			card.addChild(back); 
			card.addChild(face);         

		}         

		private function init3d():void { 
			container=new Sprite  ; 
			container.x=stage.stageWidth * .5; 
			container.y=stage.stageHeight * .5 - 30; 
			container.filters=[new DropShadowFilter(75,45,0x000000,.8,50,50)]; 
			addChild(container);         

			card=new DisplayObject3D  ;         

			//give the card a jaunty little angle 
			card.rotationZ=10;         

			scene=new Scene3D(container); 
			scene.addChild(card);         

			camera=new Camera3D  ; 
			camera.focus=250; 
			camera.zoom=4; 
		}         

		private function render(e:Event):void { 
			//spin the card 
			card.rotationY+= 5; 
			scene.renderCamera(camera); 
		} 
	} 
}

/**

* Example of a Double Sided "Card" with Papervision3D

package {

import flash.display.BitmapData;

import flash.display.Sprite;

import flash.events.Event;

import flash.filters.DropShadowFilter;

//papervision

import org.papervision3d.materials.BitmapAssetMaterial;

import org.papervision3d.cameras.Camera3D;

import org.papervision3d.objects.Plane;

import org.papervision3d.objects.DisplayObject3D;

import org.papervision3d.Papervision3D;

import org.papervision3d.scenes.Scene3D;

public class CardExample extends Sprite {

private var container:Sprite;

private var scene:Scene3D;

private var camera:Camera3D;

private var card:DisplayObject3D;

public function CardExample() {

Papervision3D.VERBOSE=false;

init();

}

private function init():void {

init3d();

createCard();

addEventListener(Event.ENTER_FRAME,render);

}

private function createCard():void {

// "Face" and "Back" are two bitmaps imported into .fla library

//and set to link for actionscript with those class names.

var faceMat:BitmapAssetMaterial=new BitmapAssetMaterial("Face");

faceMat.oneSide=false;

var backMat:BitmapAssetMaterial=new BitmapAssetMaterial("Back");

var face:Plane=new Plane(faceMat,0,0,2);

//push the face back one pixel in z space

face.z=1;

var back:Plane=new Plane(backMat,0,0,2);

card.addChild(back);

card.addChild(face);

}

private function init3d():void {

container=new Sprite ;

container.x=stage.stageWidth * .5;

container.y=stage.stageHeight * .5 - 30;

container.filters=[new DropShadowFilter(75,45,0x000000,.8,50,50)];

addChild(container);

card=new DisplayObject3D ;

//give the card a jaunty little angle

card.rotationZ=10;

scene=new Scene3D(container);

scene.addChild(card);

camera=new Camera3D ;

camera.focus=250;

camera.zoom=4;

}

private function render(e:Event):void {

//spin the card

card.rotationY+= 5;

scene.renderCamera(camera);

}

And that will give you:

Nice, huh?

“Double Sided Plane” with Papervision

Jiglib + Augmented Reality : Playing with Balls

Game Development Tips from the Trenches of PopCap

Real Drawing to Augmented Reality

Devon O. Wolfgang

Categories

Recent Comments

Archives