basics

Plane with two different sides

Tuesday, December 2nd, 2008 | examples | Comments

Create two planes, rotate the back plane 180 degrees, then group them together in a parent DisplayObject3D.


source

package {
	import flash.display.Bitmap;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
 
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="640", height="480", frameRate="60", backgroundColor="#000000")]
	public class TwoSidedPlane extends BasicView 
	{
		[Embed(source="assets/fish.jpg")]
		public var fishAsset:Class;
 
		private var planeGroup:DisplayObject3D;
 
		private var planeFront:Plane;
		private var planeBack:Plane;
 
		private var fishMaterial:BitmapMaterial;
 
		private var movieMaterial:MovieMaterial;
		private var textField:TextField;
 
		public function TwoSidedPlane()
		{
			viewport.interactive = true;
			camera.zoom = 100;
 
			//this will hold both your planes in a group
			planeGroup = new DisplayObject3D();
 
			//standard way to grab bitmap from embedded image
			var fishBitmap:Bitmap = new fishAsset() as Bitmap;
			fishMaterial = new BitmapMaterial(fishBitmap.bitmapData, true);
 
			planeFront = new Plane(fishMaterial);
 
			//a simple movieclip to hold our text field
			var movieClip:MovieClip = new MovieClip();
			movieClip.graphics.lineStyle(5,0xcc0000);
			movieClip.graphics.drawRect(0,0,300,270);
 
			//text field and formatting junk
			textField = new TextField();
			var textFormat:TextFormat = new TextFormat("Arial");
			textFormat.size = 34;
			textFormat.color = 0xcc0000;
 
			textField.autoSize = TextFieldAutoSize.LEFT;
			textField.defaultTextFormat = textFormat;
			textField.text = "default";
 
			movieClip.addChild(textField);
 
			movieMaterial = new MovieMaterial(movieClip, true, true, true);
			//smooth out the text
			movieMaterial.smooth = true;
			movieMaterial.interactive = true;
 
			planeBack = new Plane(movieMaterial);
 
			planeBack.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, objectOverHandler);
			planeBack.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, objectOutHandler);
 
 
			planeGroup.addChild(planeFront);
			/*rotate the plane in the "back" so it looks like the
			back side of the front*/
			planeBack.rotationY = 180;
			planeGroup.addChild(planeBack);
 
			scene.addChild(planeGroup);
 
			startRendering();
		}
 
		private function objectOverHandler(e:InteractiveScene3DEvent):void
		{
			textField.text = "That tickles!";
			viewport.buttonMode = true;
		}
 
		private function objectOutHandler(e:InteractiveScene3DEvent):void
		{
			textField.text = "I'm lonely!";
			viewport.buttonMode = false;
		}
 
		override protected function onRenderTick(event:Event=null):void
		{
			planeGroup.yaw(1);
			renderer.renderScene(scene, camera, viewport);
		}
	}
}

Tags: , ,

Adding a BasicView to a Flex UIComponent

Saturday, November 29th, 2008 | snippets | Comments

While I would always encourage to separate your code into separate classes to follow best OOP practices, the example below will “get the job done”.

Since the Flex framework is based off UIComponents and you can’t directly add Sprites (or BasicViews) to a UIComponent, you have to dig into the UIComponents rawChildren (meaning Sprites) to add Papervision3D.

source

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	width="640"
	height="480"
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" 
	applicationComplete="applicationComplete()">
	<mx:Script>
		<![CDATA[
/*			There are two similar methods:
			1. using rawChildren
			2. using $addChild with the mx_interal namespace
			Method #2 is commented out below
*/	
//			use namespace mx_internal; //method #2
 
			import org.papervision3d.objects.primitives.Sphere;
			import org.papervision3d.view.BasicView;
			private function applicationComplete():void
			{
				var basicView:BasicView = new BasicView();
				var sphere:Sphere = new Sphere();
				basicView.scene.addChild(sphere);
				basicView.startRendering();
				pv3dPanel.rawChildren.addChild(basicView); //method #1
//				pv3dPanel.$addChild(basicView); //method #2
			}
		]]>
	</mx:Script>
	<mx:Panel id="pv3dPanel" title="Papervision3D Panel" width="640" height="480"/>
</mx:Application>

Tags: ,

Waiting for an image to load – BitmapFileMaterial

Friday, November 21st, 2008 | snippets | Comments
package
{
	import org.papervision3d.events.FileLoadEvent;
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
	public class WaitForAnImageToLoad extends BasicView
	{
 
		public function WaitForAnImageToLoad()
		{
			var url:String = "http://content.screencast.com/media/1676f247-e7f0-4035-a826-06e2d7885731_089125cc-8776-47ed-92d7-280330071c15_static_0_0_00000149.png";
			var bitmapFileMaterial:BitmapFileMaterial = new BitmapFileMaterial(url);
			bitmapFileMaterial.addEventListener(FileLoadEvent.LOAD_COMPLETE, loadCompleteHandler);
		}
 
		private function loadCompleteHandler(event:FileLoadEvent):void
		{
			var plane:Plane = new Plane(BitmapFileMaterial(event.target));
			scene.addChild(plane);
			singleRender();
		}
	}
}

Tags: ,

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: , ,

Search

Recommended Books

Speaking at FITC Toronto

Recent Comments

 

July 2010
M T W T F S S
« May    
 1234
567891011
12131415161718
19202122232425
262728293031  

Preferred Video Tutorial Resolution

  • 1024x768 (53%, 85 Votes)
  • 1280x1024 (15%, 24 Votes)
  • 1920x1080 (15%, 24 Votes)
  • 800x600 (13%, 20 Votes)
  • 480x320 (4%, 6 Votes)
  • 640x480 (0%, 2 Votes)

Total Voters: 160

Loading ... Loading ...