flex/flash 3d基础-生成线框箱体

【贝武易科技专业flex3D开发--www.newflash3d.com】
十分感谢kirupa.com的贡献
我们是在flex下建立三维效果，如下图


主程序代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init();" width="400" height="400">
	<mx:Canvas id="canvas3d" width="300" height="300" x="200" y="200"></mx:Canvas>
	<mx:Script>
		<![CDATA[
			import hjh3dcom.Object3d;
		    import flash.display.Sprite;
		    import hjh3dcom.*;
		    
			private var container:Sprite;
			private var point:Object3d;
			private var pointIn2D:Object;
			private var pointsArray:Array;//三维的点集
			private var screenPoints:Array;//平面投影的点集
			private var thisPoint:Object3d;
			//基本的元素
			//焦距
			private var FocalLength:Number;
			//方向
			private var direction:String;
			//速度
            private var speed:Number;
            //缩放比例
            private var scaleRatio:Number;
				
			private function init():void{
				FocalLength=200;
				direction="left";
				speed=5;
				container=new Sprite;
				canvas3d.rawChildren.addChild(container);
				//下面这个数组为Object3d物体集合；
				pointsArray = [
	                           MakeA3DPoint(-20, -40, -20), /* bottom half of box (low y value) */
	                           MakeA3DPoint(20, -40, -20),
	                           MakeA3DPoint(20, -40, 20),
	                           MakeA3DPoint(-20, -40, 20),
	                           MakeA3DPoint(-20, 80, -20), /* top half of box (high y value) */
	                           MakeA3DPoint(20, 80, -20),
	                           MakeA3DPoint(20, 80, 20),
	                           MakeA3DPoint(-20, 80, 20)
                               ];
                container.addEventListener(Event.ENTER_FRAME,backAndForthAndSideToSide);
			};
			private function MakeA3DPoint(x3d:Number,y3d:Number,z3d:Number):Object3d{
				point=new Object3d();
				point.x3d=x3d;
				point.y3d=y3d;
				point.z3d=z3d;
				return point;
			}//注意，这里函数返回的结果是一个point物体，它是属于Object3d类的物体，这个物体我们给它定义了三个三维坐标属性；
			private function ConvertPointIn3DToPointIn2D(pointIn3D:Object3d, focalLength:Number):Object{
	            // make an object to act as the 2D point on the screen
	            pointIn2D = new Object();
	            // develop a scale ratio based on focal length and the
	            // z value of this point
	            scaleRatio = focalLength/(focalLength + pointIn3D.z3d);
	            // appropriately scale each x and y position of the 3D point based
	            // on the scale ratio to determine the point in 2D.
	            pointIn2D.x = pointIn3D.x3d * scaleRatio;
	            pointIn2D.y = pointIn3D.y3d * scaleRatio;
	            // return the new 2D point
	            return pointIn2D;
                }
			private function backAndForthAndSideToSide(evt:Event):void{
				screenPoints=new Array();
	            for (var i=0; i<pointsArray.length; i++){
                    thisPoint = pointsArray[i];	
		            if (direction == "left"){
			            thisPoint.x3d -= speed;
			        // only check if this is the last point in pointsArray
			        if (i == pointsArray.length-1 && thisPoint.x3d <= -100) direction = "backward";
		            }else if (direction == "backward"){
			        thisPoint.z3d += speed;
			        // only check if this is the last point in pointsArray
			        if (i == pointsArray.length-1 && thisPoint.z3d >= 150) direction = "right";
		            }else if (direction == "right"){
			        thisPoint.x3d += speed;
			        // only check if this is the last point in pointsArray
			        if (i == pointsArray.length-1 && thisPoint.x3d >= 60) direction = "forward";
		            }else if (direction == "forward"){
			        thisPoint.z3d -= speed;
			        // only check if this is the last point in pointsArray
			        if (i == pointsArray.length-1 && thisPoint.z3d <= 0) direction = "left";
		            }
		
		           // now that the point has been moved, convert it
		           // and save it to the screenPoints array
		           screenPoints[i] = ConvertPointIn3DToPointIn2D(thisPoint, FocalLength);
		
		           // now that its a screen point, we can throw in
		           // the origin offset to center it on the screen
		           //screenPoints[i].x += Origin.x;
		           //screenPoints[i].y += Origin.y;
		           screenPoints[i].x ++;
		           screenPoints[i].y ++;
	               }// end of loop
	            container.graphics.clear(); // clear any previously drawn box
	            container.graphics.lineStyle(2,0xFF0000,100); // make the drawn lines to be red
	
	           // this part can be tedious since it maps out each line - wheeew
	           // this is where having drawn out the image on paper really helps
	           // you can always reference the pointsArray to figure out where
	           // your points are in 3D space so you know where to connect them
	
	           // top
	           container.graphics.moveTo(screenPoints[0].x, screenPoints[0].y);
	           container.graphics.lineTo(screenPoints[1].x, screenPoints[1].y);
	           container.graphics.lineTo(screenPoints[2].x, screenPoints[2].y);
	           container.graphics.lineTo(screenPoints[3].x, screenPoints[3].y);
	           container.graphics.lineTo(screenPoints[0].x, screenPoints[0].y);
	           // bottom
	           container.graphics.moveTo(screenPoints[4].x, screenPoints[4].y);
	           container.graphics.lineTo(screenPoints[5].x, screenPoints[5].y);
	           container.graphics.lineTo(screenPoints[6].x, screenPoints[6].y);
	           container.graphics.lineTo(screenPoints[7].x, screenPoints[7].y);
	           container.graphics.lineTo(screenPoints[4].x, screenPoints[4].y);
	           // connecting bottom and top
	           container.graphics.moveTo(screenPoints[0].x, screenPoints[0].y);
	           container.graphics.lineTo(screenPoints[4].x, screenPoints[4].y);
	           container.graphics.moveTo(screenPoints[1].x, screenPoints[1].y);
	           container.graphics.lineTo(screenPoints[5].x, screenPoints[5].y);
	           container.graphics.moveTo(screenPoints[2].x, screenPoints[2].y);
	           container.graphics.lineTo(screenPoints[6].x, screenPoints[6].y);
	           container.graphics.moveTo(screenPoints[3].x, screenPoints[3].y);
	           container.graphics.lineTo(screenPoints[7].x, screenPoints[7].y);
				}
		]]>
	</mx:Script>
</mx:Application>

再加一个自定义3D物体的扩展类Object3d.as，代码如下：

package hjh3dcom
{
	public class Object3d extends Object
	{
		private var _x3din:Number;
		private var _y3din:Number;
		private var _z3din:Number;
		
		public function Object3d()
		{
			super();
			init();
		}
		private function init():void{
			_x3din=0;
			_y3din=0;
			_z3din=0;
		}
        //----------------------------------------
		public function set x3d(x3din:Number):void
		{
			_x3din = x3din;	
		}
		public function get x3d():Number
		{
			return _x3din;	
		}
		//----------------------------------------
		public function set y3d(y3din:Number):void
		{
			_y3din = y3din;	
		}
		public function get y3d():Number
		{
			return _y3din;	
		}
		//----------------------------------------
		public function set z3d(z3din:Number):void
		{
			_z3din = z3din;	
		}
		public function get z3d():Number
		{
			return _z3din;	
		}
		
		
	}
}

我们会在下面的文章里进一步做分析，请关注。
【贝武易科技专业flex3D开发--www.newflash3d.com】