Camera

Click then Tween Camera to Plane

Sunday, December 28th, 2008 | examples | Comments

I posted a similar example in the archive over a year ago now that turned out to be quite popular. Since that’s now outdated, here’s a quick n’ dirty updated version:

All images come from dryicons.com/

source

package
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	import gs.TweenMax;
	import gs.easing.Cubic;
 
	import org.papervision3d.core.math.Quaternion;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
	public class TweenToSpatialPlanes extends BasicView
	{
		[Embed(source="assets/1.jpg")]
		private var oneAsset:Class;
		[Embed(source="assets/2.jpg")]
		private var twoAsset:Class;
		[Embed(source="assets/3.jpg")]
		private var threeAsset:Class;
		[Embed(source="assets/4.jpg")]
		private var fourAsset:Class;
		[Embed(source="assets/5.jpg")]
		private var fiveAsset:Class;
		[Embed(source="assets/6.jpg")]
		private var sixAsset:Class;
 
		private var assets:Array = [oneAsset, twoAsset, threeAsset, fourAsset, fiveAsset, sixAsset];
 
		private static const NUM_PLANES:int = 40;
		private static const TWEEN_TIME:Number = 2;
		private static const DISTANCE_FROM_PLANE:Number = 500;
 
		private var cameraWithSlerp:CameraWithSlerp = new CameraWithSlerp();
 
		private var cameraStart:DisplayObject3D = new DisplayObject3D();
		private var cameraTarget:DisplayObject3D = new DisplayObject3D();
 
		private var startQuaternion:Quaternion = null;
		private var endQuaternion:Quaternion = null;
		private var currentQuaternion:Quaternion = null;
 
		public function TweenToSpatialPlanes()
		{
			setupPapervision3D();			
			setupBackground();
			setupPlanes();
 
			singleRender();
		}
 
		private function setupPapervision3D():void
		{
			viewport.interactive = true;
			cameraWithSlerp.target = null;
			cameraWithSlerp.slerp = 0;
			cameraStart.z = -1000;
			scene.addChild(cameraStart);
		}
 
		private function setupBackground():void
		{
			//the background is for the "click outside" events
			var backgroundSprite:Sprite = new Sprite();
 
			backgroundSprite.graphics.beginFill(0x000000);
			backgroundSprite.graphics.drawRect(0, 0, width, height);
			backgroundSprite.graphics.endFill();
 
			addChildAt(backgroundSprite, getChildIndex(viewport));
 
			backgroundSprite.addEventListener(MouseEvent.CLICK, backgroundSprite_clickHandler);
		}
 
		private function setupPlanes():void
		{
			for(var i:int = 0; i < NUM_PLANES; i++)
			{
				var bitmapMaterial:BitmapMaterial = createRandomBitmapMaterial();
				bitmapMaterial.interactive = true;
				bitmapMaterial.doubleSided = true;
				bitmapMaterial.precise = true;
 
				var plane:Plane = new Plane(bitmapMaterial);
 
				plane.x = Math.random() * 5000 - 2500;
				plane.y = Math.random() * 5000 - 2500;
				plane.z = Math.random() * 2500;
				plane.rotationX = Math.random() * 180 -90;
				plane.rotationY = Math.random() * 180 -90;
				plane.rotationZ = Math.random() * 180 -90;
 
				scene.addChild(plane);
 
				plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler);
			}
		}
 
		private function createRandomBitmapMaterial():BitmapMaterial
		{
			//grab a bitmapAsset from the array (this is very ugly, but not important to the concept :) )
			var bitmap:Bitmap = Bitmap(new assets[Math.floor(Math.random() * assets.length)]);
			var bitmapMaterial:BitmapMaterial = new BitmapMaterial(bitmap.bitmapData);
 
			return bitmapMaterial;
		}
 
		private function plane_objectClickHandler(event:InteractiveScene3DEvent):void
		{
			var plane:Plane = Plane(event.target);
			//put the target behind the plane
			cameraTarget.copyTransform(plane);
			cameraTarget.moveBackward(DISTANCE_FROM_PLANE);
 
			createTween(cameraTarget);
		}
 
		private function backgroundSprite_clickHandler(event:MouseEvent):void
		{
			createTween(cameraStart);
		}
 
		private function createTween(displayObject3d:DisplayObject3D):void
		{
			//when "slerping", this value is a range from 0 to 1
			//0 being the starting total rotation (AKA transformation)
			//1 being the ending total rotation
			cameraWithSlerp.slerp = 0;
 
			var tweenObject:Object = {};
			tweenObject.x = displayObject3d.x;
			tweenObject.y = displayObject3d.y;
			tweenObject.z = displayObject3d.z;
			tweenObject.bezierThrough = [{x:0, y:0, z:0, slerp:.1}];
			tweenObject.ease = Cubic.easeInOut;
			tweenObject.slerp = 1;
			tweenObject.onUpdate = camera_updateCallback;
 
			startQuaternion = Quaternion.createFromMatrix(cameraWithSlerp.transform);
			endQuaternion = Quaternion.createFromMatrix(displayObject3d.transform);
 
			TweenMax.to(cameraWithSlerp, TWEEN_TIME, tweenObject);
		}
 
		private function camera_updateCallback():void
		{
			currentQuaternion = Quaternion.slerp(startQuaternion, endQuaternion, cameraWithSlerp.slerp);
			cameraWithSlerp.transform.copy3x3(currentQuaternion.matrix);
			singleRender();
		}
 
		override public function singleRender():void
		{
			renderer.renderScene(scene, cameraWithSlerp, viewport);
		}
	}
}
 
//a helper class whose sole purpose is to add the slerp property
//I use this for the sake of brevity, but for production code
//you would move this into a new ActionScript file
import org.papervision3d.cameras.Camera3D;
class CameraWithSlerp extends Camera3D
{
	public var slerp:Number = 0;
}

Tags: camera, slerp, tweenmax

Camera free vs. target

Friday, November 21st, 2008 | examples | Comments

By default, cameras point forward. If you give them a “target” to look at, they’ll stay focused on the target. In this example, you’ll see two cameras moving in the exact same circular pattern. The left camera keeps looking forward while the right camera keeps looking at the center

source

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextFormat;
 
	import gs.TweenMax;
 
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
 
	[SWF(width="800", height="300", backgroundColor="#000000", frameRate="60")]
	public class FreeCameraVSTargetCamera extends Sprite
	{
		private var leftViewport:Viewport3D;
		private var leftCamera:Camera3D;
		private var rightViewport:Viewport3D;
		private var rightCamera:Camera3D;
		private var scene:Scene3D;
		private var renderer:BasicRenderEngine;
 
		public function FreeCameraVSTargetCamera()
		{
			leftViewport = new Viewport3D(400, 300);
			leftCamera = new Camera3D();
			leftCamera.y = 100;
			leftCamera.z = -2000;
 
			rightViewport = new Viewport3D(400, 300);
			rightCamera = new Camera3D();
			rightCamera.target = DisplayObject3D.ZERO;//x:0, y:0, z:0
			rightCamera.y = 100;
			rightCamera.z = -2000;
 
			addChild(leftViewport);
			rightViewport.x = 400;
			rightViewport.opaqueBackground = 0xffffff;
			addChild(rightViewport);
 
			scene= new Scene3D();
			renderer = new BasicRenderEngine();
 
			for(var i:int = 0; i < 5; i++)
			{
				for(var j:int = 0; j < 5; j++)
				{
					var randColor:Number = Math.random() * 0xffffff;
					var material:WireframeMaterial = new WireframeMaterial(randColor, 1, 2);
					var sphere:Sphere = new Sphere(material);
					sphere.x = 1000 * i - 2000;
					sphere.z = 1000 * j - 2000;
					scene.addChild(sphere);	
				}
			}
 
			var floor:Plane = new Plane(new WireframeMaterial(0x00cc00, 1, 2), 5000, 5000, 10, 10);
			floor.pitch(90);
			floor.y = -100;
			scene.addChild(floor);
 
			//Set both cameras along the same circular motion
			var bezierThrough:Array = [{x:2000, z:0}, {x:0, z:2000}, {x:-2000, z:0}];
			TweenMax.to(leftCamera, 10, {x:0, z:-2000, bezierThrough:bezierThrough, yoyo:true});
			TweenMax.to(rightCamera, 10, {x:0, z:-2000, bezierThrough:bezierThrough, yoyo:true});
 
			addEventListener(Event.ENTER_FRAME, enterFrameHandler);
 
			addText();
		}
 
		private function addText():void
		{
			var leftHeaderText:headerContainer = new headerContainer();
			leftHeaderText.header.text = "No target";
			addChild(leftHeaderText);
 
			var rightHeaderText:headerContainer = new headerContainer();
			rightHeaderText.x = 400;
			var textFormat:TextFormat = new TextFormat();
			textFormat.color = 0x000000;
			rightHeaderText.header.defaultTextFormat = textFormat;
			rightHeaderText.header.text = "Target DisplayObject3D.ZERO";
			addChild(rightHeaderText);
		}
 
		private function enterFrameHandler(event:Event):void
		{
			renderer.renderScene(scene, leftCamera, leftViewport);
			renderer.renderScene(scene, rightCamera, rightViewport);
		}
	}
}

Tags: basics, camera, multiple viewports

Dragging mouse for camera orbit

Wednesday, November 19th, 2008 | examples | Comments

This little gem comes from a chat I had a while back with Tim Knip:

source

package
{
	import flash.events.MouseEvent;
 
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
	public class OrbitingCameraExample extends BasicView
	{
		private var isOribiting:Boolean;
		private var cameraPitch:Number = 90;
		private var cameraYaw:Number = 270;
		private var cameraTarget:DisplayObject3D = DisplayObject3D.ZERO;
		private var previousMouseX:Number;
		private var previousMouseY:Number;
 
		private var light:PointLight3D;
 
		public function OrbitingCameraExample()
		{
			light = new PointLight3D();
			var material:FlatShadeMaterial = new FlatShadeMaterial(light, 0xcc0000);
 
			var sphere1:Sphere = new Sphere(material, 300, 10, 10);
			var sphere2:Sphere = new Sphere(material, 100, 10, 10);
			sphere2.x = 300;
			sphere2.y = 300;
			sphere2.z = 700
			var sphere3:Sphere = new Sphere(material, 100, 10, 10);
			sphere3.x = 600;
			sphere3.y = -400;
			sphere3.z = -200;
			var sphere4:Sphere = new Sphere(material, 100, 10, 10);
			sphere4.x = -700;
			sphere3.z = -100;
 
			scene.addChild(sphere1);
			scene.addChild(sphere2);
			scene.addChild(sphere3);
			scene.addChild(sphere4);
 
			stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
			stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
 
			startRendering();
		}
 
		private function onMouseDown(event:MouseEvent):void
		{
			isOribiting = true;
			previousMouseX = event.stageX;
			previousMouseY = event.stageY;
		}
 
		private function onMouseUp(event:MouseEvent):void
		{
			isOribiting = false;
		}
 
		private function onMouseMove(event:MouseEvent):void
		{
			var differenceX:Number = event.stageX - previousMouseX;
			var differenceY:Number = event.stageY - previousMouseY;
 
			if(isOribiting)
			{
				cameraPitch += differenceY;
				cameraYaw += differenceX;
 
				cameraPitch %= 360;
				cameraYaw %= 360;
 
				cameraPitch = cameraPitch > 0 ? cameraPitch : 0.0001;
				cameraPitch = cameraPitch < 90 ? cameraPitch : 89.9999;
 
				previousMouseX = event.stageX;
				previousMouseY = event.stageY;
 
				camera.orbit(cameraPitch, cameraYaw, true, cameraTarget);
			}
		}
	}
}