flex/flash 3d基础-生成线框箱体-思路分析（二）

最新推荐文章于 2023-05-03 21:29:54 发布

chinalofthjh

最新推荐文章于 2023-05-03 21:29:54 发布

阅读量109

点赞数

分类专栏： flex及Flash3D表现研究文章标签： Flex Flash Java QQ XML

flex及Flash3D表现研究专栏收录该内容

6 篇文章 0 订阅

订阅专栏

接着上面的文章，我们可以先生成一个静止的方体线框，基本的思路是：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:myCanvas3D="myCanvas3D.*" applicationComplete="init();">
	<mx:Script>
		<![CDATA[
			import hjh3dcom.Object3d;
			private function init():void{
				this.addEventListener(Event.ENTER_FRAME,onenterframe);
			}
			private function make3dPoint(x3d:Number,y3d:Number,z3d:Number):Object3d{
				var point3d=new Object3d();
				return point3d;
			}
			private function make2dPoint(ob3d:Object3d,focalLength:Number):Object{
				var point2d=new Object();
				return point2d;
			}
			private function onenterframe(evt:Event):void{

			}
		]]>
	</mx:Script>
	<myCanvas3D:Canvas3D id="mycanvas" width="500" height="400" backgroundColor="0x000000"/>
</mx:Application>

初始化参数，增加一个时间的侦听器。

			private function init():void{
				this.addEventListener(Event.ENTER_FRAME,onenterframe);
			}

生成三维的点的方法：

			private function make3dPoint(x3d:Number,y3d:Number,z3d:Number):Object3d{
				var point3d=new Object3d();
				return point3d;
			}

由三维的点的方法转换（或生成）二维的点的方法：

			private function make2dPoint(ob3d:Object3d,focalLength:Number):Object{
				var point2d=new Object();
				return point2d;
			}

在时间的运行中绘制物体：

			private function onenterframe(evt:Event):void{

			}

基本的构架是这样了，下面就靠我们把每个方式给实现了就可以了。
我们丰富完代码后：


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:myCanvas3D="myCanvas3D.*" applicationComplete="init();">
	<mx:Script>
		<![CDATA[
			import hjh3dcom.Object3d;

			private var point2dArray:Array;
			private var focalLength:Number=300;

			private function init():void{
				this.addEventListener(Event.ENTER_FRAME,onenterframe);
				//通过方法来建立了三维空间的点阵（点的组合）
				var point3dArray:Array=[make3dPoint(-20, -40, -20),
										make3dPoint(20, -40, -20),
										make3dPoint(20, -40, 20),
										make3dPoint(-20, -40, 20),
										make3dPoint(-20, 80, -20),
										make3dPoint(20, 80, -20),
										make3dPoint(20, 80, 20),
										make3dPoint(-20, 80, 20)]
				point2dArray=new Array();
				for (var i=0; i<point3dArray.length; i++){
					var point2d=make2dPoint(point3dArray[i],focalLength);
					//trace(point2d);
					point2dArray.push(point2d);
				}
				trace(point2dArray);		
			}
			private function make3dPoint(x3d:Number,y3d:Number,z3d:Number):Object3d{
				var point3d=new Object3d();
				point3d.x3d=x3d;
				point3d.y3d=y3d;
				point3d.z3d=z3d;
				return point3d;
			}
			private function make2dPoint(point3d:Object3d,focalLength:Number):Object{
				var point2d=new Object();
				var scaleRatio = focalLength/(focalLength + point3d.z3d);
				point2d.x=point3d.x3d*scaleRatio+250;
				point2d.y=-point3d.y3d*scaleRatio+200;	
				return point2d;
			}
			private function onenterframe(evt:Event):void{

			   mycanvas.canvas.graphics.clear(); // clear any previously drawn box
	           mycanvas.canvas.graphics.lineStyle(2,0xFF0000,100); // make the drawn lines to be red

	           mycanvas.canvas.graphics.moveTo(-100+250, 0+200);
	           mycanvas.canvas.graphics.lineTo(100+250, 0+200);

	           // top
	           mycanvas.canvas.graphics.moveTo(point2dArray[0].x, point2dArray[0].y);
	           mycanvas.canvas.graphics.lineTo(point2dArray[1].x, point2dArray[1].y);
	           mycanvas.canvas.graphics.lineTo(point2dArray[2].x, point2dArray[2].y);
	           mycanvas.canvas.graphics.lineTo(point2dArray[3].x, point2dArray[3].y);
	           mycanvas.canvas.graphics.lineTo(point2dArray[0].x, point2dArray[0].y);
	           // bottom
	           mycanvas.canvas.graphics.moveTo(point2dArray[4].x, point2dArray[4].y);
	           mycanvas.canvas.graphics.lineTo(point2dArray[5].x, point2dArray[5].y);
	           mycanvas.canvas.graphics.lineTo(point2dArray[6].x, point2dArray[6].y);
	           mycanvas.canvas.graphics.lineTo(point2dArray[7].x, point2dArray[7].y);
	           mycanvas.canvas.graphics.lineTo(point2dArray[4].x, point2dArray[4].y);
	           // connecting bottom and top
	           mycanvas.canvas.graphics.moveTo(point2dArray[0].x, point2dArray[0].y);
	           mycanvas.canvas.graphics.lineTo(point2dArray[4].x, point2dArray[4].y);
	           mycanvas.canvas.graphics.moveTo(point2dArray[1].x, point2dArray[1].y);
	           mycanvas.canvas.graphics.lineTo(point2dArray[5].x, point2dArray[5].y);
	           mycanvas.canvas.graphics.moveTo(point2dArray[2].x, point2dArray[2].y);
	           mycanvas.canvas.graphics.lineTo(point2dArray[6].x, point2dArray[6].y);
	           mycanvas.canvas.graphics.moveTo(point2dArray[3].x, point2dArray[3].y);
	           mycanvas.canvas.graphics.lineTo(point2dArray[7].x, point2dArray[7].y);
			}
		]]>
	</mx:Script>
	<myCanvas3D:Canvas3D id="mycanvas" width="500" height="400" backgroundColor="0x000000"/>
</mx:Application>

最后效果如图：

[img]/upload/attachment/81371/24c017ed-ebe7-3d6a-bff3-8d1565a69ef7.jpg[/img]
[b]【[url]http://www.newflash3d.com[/url]---flash3D先锋队：北京贝武易科技公司】[/b]
有疑问请联系我QQ:363596350