Team Blog

Next, we deal with a PV3D class that shows a video playing upon a 3D plane made with Papervision. You can see a reflection behind the video with a blur effect using the integrated effect branch. This was developed some months ago thinking in our new site, but finaly, due to time constraints, it was left for future versions.

The example uses BasicView as the superclass to ensure all things all already setup for you (camera, width, height, scene, viewport,…).

Here is the final example running:

You can explore and download the source coder here.

The following is the sorce code of the main class. Hope you find it interesting:

package {
	import flash.display.BitmapData;
	import flash.display.GradientType;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.NetStatusEvent;
	import flash.filters.BlurFilter;
	import flash.geom.Matrix;
	import flash.media.Video;
	import flash.net.NetConnection;
	import flash.net.NetStream;

	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.VideoStreamMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;

    [SWF(backgroundColor="#FFFFFF")]
	public class VideoOnPlane extends BasicView
	{
		private var ns:NetStream;
		private var v:Video;
		private var plane:Plane;
		private var reflectionPlane:Plane;
		private var vm:VideoStreamMaterial;
		private var bm:BitmapMaterial;
		private var matrix:Matrix;
		private var gradientMask:Sprite;

		private function initVideo():void {
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

			var nc:NetConnection = new NetConnection();
			nc.connect(null);

			ns = new NetStream(nc);
			ns.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);
			ns.play("video/phone.flv");

			v = new Video();
			v.attachNetStream(ns);
		}

		public function VideoOnPlane(viewportWidth:Number=400, viewportHeight:Number=300, scaleToStage:Boolean=true, interactive:Boolean=false, cameraType:String="CAMERA3D")
		{
			super(viewportWidth, viewportHeight, scaleToStage, interactive, cameraType);

			camera.focus = 400;
			camera.zoom = 2;

			initVideo();			

			vm = new VideoStreamMaterial(v, ns, true);
			vm.smooth = true;
			vm.doubleSided = true;

			plane = new Plane(vm, v.width, v.height);
			scene.addChild(plane);

			bm = new BitmapMaterial(new BitmapData(v.width, v.height), true);
			bm.doubleSided = true;

			reflectionPlane = new Plane(bm, v.width, v.height);
			reflectionPlane.rotationX = 180;
			reflectionPlane.y = -v.height
			scene.addChild(reflectionPlane);

			reflectionPlane.createViewportLayer(viewport, false).filters = [new BlurFilter()];

			matrix = new Matrix();
			matrix.createGradientBox(v.width, v.height, (90/180)*Math.PI, 0, 90);

			gradientMask = new Sprite();
			gradientMask.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xFFFFFF], [1, 0.4], [0, 255], matrix);
			gradientMask.graphics.drawRect(0,0,v.width, v.height);
			gradientMask.graphics.endFill();
			gradientMask.cacheAsBitmap = true;

			startRendering();
		}

		protected override function onRenderTick(event:Event = null):void {
			//plane.yaw(1);
			//reflectionPlane.yaw(-1);

			plane.rotationY = -35;
			reflectionPlane.rotationY = -35;

			reflectPicture();

			super.onRenderTick(event);
		}

		private function reflectPicture():void {
			bm.bitmap.draw(plane.material.bitmap);
			bm.bitmap.draw(gradientMask);
		}

		private function onNetStatus(e:NetStatusEvent):void {
			switch (e.info.code) {
        		case "NetConnection.Connect.Success":
	            	trace("successfully connected");
	       	     	break;
				case "NetStream.Play.StreamNotFound":
	            	trace("Unable to locate video: ");
	            	break;
				case "NetStream.Buffer.Full":
					trace("buffer full");
					break;
				case "NetStream.Buffer.Empty":
					trace("buffer empty");
					break;
				case "NetStream.Play.Stop":
					trace ("video finished");
					ns.seek(0);
					ns.pause();
					break;

        	}
		}
	}
}

Hope you enjoy this example and start trying Papervision3D to show us what you can do!