“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); } } }

And that will give you:

[kml_flashembed movie=”/wp-content/uploads/2008/01/cardexample.swf” height=”400″ width=”500″ fversion=”9″ /]

Nice, huh?