Archive for November 17th, 2008

Finding 2d Vertices in a DisplayObject3D

Monday, November 17th, 2008 | examples | Comments

This is kind of a ridiculous example, but it shows how you can loop through all of the vertices of a DisplayObject3D and pull out the 2d x and y coordinates.

The stars start out in random locations then tween to the vertices of the sphere.

View example
source

package {
	import gs.TweenMax;
	import gs.easing.*;
 
	import org.papervision3d.core.geom.renderables.Vertex3D;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
	public class Finding2DVertexPoints extends BasicView
	{
		private var sphere:Sphere;
		private var stars:Array = [];
		private var vertices:Array = [];
 
		public function Finding2DVertexPoints()
		{
			sphere = new Sphere(new ColorMaterial(), 300, 15, 15);
			sphere.material.fillAlpha = 0;
			scene.addChild(sphere);
 
			//sphere.geometry.vertices is an array of vertex3D's
			//each vertex3D contains a vertex3DInstance which
			//has the 2d x and y property
			//long-hand sytax: sphere.geometry.vertices[i].vertex3DInstance.x	
			for each(var vertex3D:Vertex3D in sphere.geometry.vertices)
			{
				var dummyStar:star = new star();
				dummyStar.x = Math.random() * this.width;
				dummyStar.y = Math.random() * this.height;
				stars.push(dummyStar);
				this.addChild(dummyStar);
 
				//render once to calculate vertex data
				singleRender(); 
				//push all the sphere's vertices into an array
				vertices.push(vertex3D.vertex3DInstance); 
			}
 
			startTween();
		}
 
		private function startTween():void
		{
			for(var i:int = 0; i<vertices.length; i++)
			{
				var time:Number = 4;
 
				var tweenObject:Object = {};
				tweenObject.yoyo = true;
				tweenObject.ease = Quad.easeInOut;
				//assign the endpoint of the tween to vertices gathered above
				tweenObject.x = vertices[i].x + width/2; 
				tweenObject.y = vertices[i].y + height/2;
				tweenObject.scaleX = tweenObject.scaleY = .2;
				tweenObject.bezierThrough = [{x:Math.random() * width, y:Math.random() * height}];
				tweenObject.orientToBezier = true;
 
				TweenMax.to(stars[i], time, tweenObject);
			}
		}
	}
}

Tags: , ,

Finding 2D Coordinates of a DisplayObject3D

Monday, November 17th, 2008 | examples | Comments

I see this question pop up rather frequently, so I thought I’d make a quick demo.

First the 3d plane will tween to a random x, y, and z, then the 2d movieclip will tween to the plane’s local screen x and y. The 2d movieclip is also showing the current x and y in text of the plane for reference.

View example
source

package {
	import gs.TweenMax;
	import gs.easing.*;
 
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
	public class Finding2DCoordinates extends BasicView
	{
		private var plane:Plane;
		private var box2D:blue2DBox;
 
		public function Finding2DCoordinates()
		{
			var planeMaterial:ColorMaterial = new ColorMaterial(0xcc0000);
 
			plane = new Plane(planeMaterial);
			box2D = new blue2DBox();	
 
			scene.addChild(plane);
			addChild(box2D);
 
			plane.autoCalcScreenCoords = true; //Turn screen coords on
 
			startRendering();
 
			tweenPlane();
		}
 
		private function tweenPlane():void
		{
			var xTarget:Number = Math.random() * 1500 - 750;	
			var yTarget:Number = Math.random() * 1500 - 750;
			var zTarget:Number = Math.random() * 1500;
 
			var tweenObject:Object = {};
			tweenObject.x = xTarget;
			tweenObject.y = yTarget;
			tweenObject.z = zTarget;
			tweenObject.onComplete = tweenBox;
			tweenObject.onUpdate = updateText;	
 
			TweenMax.to(plane, 1, tweenObject);
		}
 
		private function tweenBox():void
		{
			//plane's 2d x and y
			var xTarget:Number = plane.screen.x + this.width/2;
			var yTarget:Number = plane.screen.y + this.height/2;
 
			var tweenObject:Object = {};
			tweenObject.x = xTarget;
			tweenObject.y = yTarget;
			tweenObject.onComplete = tweenPlane;	
 
			tweenObject.ease = Quad.easeInOut;
 
			TweenMax.to(box2D, 1, tweenObject);
		}
 
		private function updateText():void
		{
			box2D.xText.text = "x: " + String(Math.floor(plane.screen.x + this.width/2));
			box2D.yText.text = "y: " + String(Math.floor(plane.screen.y + this.height/2));
		}
	}
}

Tags: ,

Search

Recommended Books

Speaking at FITC Toronto

 

November 2008
M T W T F S S
    Dec »
 12
3456789
10111213141516
17181920212223
24252627282930

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 ...