flex/flash 3d基础-生成线框箱体-思路分析(一)

接着上面的例子，我们分析一下设计的思路。
首先，我们假设存在一个三维坐标世界。
【http://www.newflash3d.com---flash3D先锋队：北京贝武易科技公司】
有疑问请联系我QQ:363596350
基本思路：
1、假设三维坐标系存在；
2、构造三维坐标的点；
3、由三维的点构造二维的点（以三维的点作为参数）；
4、根据二维的点绘制图形；

1、假设三维坐标系存在：
   我们把这个坐标系的基本物体构造为一个Object：

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;	
		}
		
		
	}
}

这里为了区别与Flex本身的坐标特性，我们用了x3d、y3d、z3d来代替X、Y、Z，其实他们的意义是一样的，只不过是一个符合代表而已，你也可以规定为其他的形式。

他们具有三个坐标值：X、Y、Z
在这个坐标中存在一个点的集合，我们可以理解为点阵。

2、构造三维坐标的点；
我们用这个方法来生成点：

			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类的物体，这个物体我们给它定义了三个三维坐标属性；

有一点需要注意的，这个点只是我们虚构想像的空中的点，它实际上是不存在的。
好，有了生产点的方法，那么我们就通过它来构成一个空间的点的集合，如果我们要构成一个方体，我们都知道方体有8个点顶，所以我们通过一个数组来存储这8个顶点，然后再对这些顶点进行运算操作。
生成点集合的数组：

				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)
                               ];

它落实为空间的点为：



把三维的点转换到二维的点的方法：

			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;
                }

在输入三维的点和定义好的焦距后，
只要执行ConvertPointIn3DToPointIn2D方法，就会获得一个二维点物体。

最后就是实现绘制物体了。

			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);
				}

backAndForthAndSideToSide方法是一个根据Flash的时间来绘制物体了。