Flash/Flex学习笔记(50)：3D线条与填充
3D线条：把上一篇中的3D坐标旋转示例稍做修改，用线把各个小球连接起来即可。
001 var balls:Array;
002 var numBalls:uint=30;
003
004 var fl:Number=250;
005 var vpx:Number=stage.stageWidth/2;
006 var vpy:Number=stage.stageHeight/2;
007
008 function init():void {
009 balls=new Array(numBalls);
010 for (var i:uint=0; i<numBalls; i++) {
011 var ball:Ball3D=new Ball3D(0,0x000000);//注意：我们只需要线条，不需要小球，所以这里把小球的半径设置为0
012 balls[i]=ball;
013 ball.xpos = (Math.random()*2-1)*100;
014 ball.ypos = (Math.random()*2-1)*100;
015 ball.zpos = (Math.random()*2-1)*100;
016 addChild(ball);
017 }
018 addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
019 }
020
021 function EnterFrameHandler(e:Event):void {
022 var dx:Number=mouseX-vpx;
023 var dy:Number=mouseY-vpy;
024 var angleY:Number=dx*0.0005;
025 var angleX:Number=dy*0.0005;
026 var angleZ:Number=Math.sqrt(dx*dx+dy*dy)*0.0005;
027
028 if (dx>0) {
029 angleZ*=-1;
030 }//以鼠标所在点的x坐标相对于消失点的位置为判断依据，左侧z轴正向旋转，右侧z轴反向旋转
031
032 for (var i:uint; i<numBalls; i++) {
033 var b:Ball3D=balls[i];
034 rotateX(b,angleX);
035 rotateY(b,angleY);
036 rotateZ(b,angleZ);
037 doPerspective(b);
038 }
039
040 //画线(注：画线处理，只能在所有旋转及透视完成之后再处理，否则如果先画好线，再处理旋转的话，因为小球的坐标已经变了，所以看上去线条的接头有可能不连续)
041 graphics.clear();
042 graphics.lineStyle(0);
043 graphics.moveTo(balls[0].x, balls[0].y);
044 for (i = 1; i < numBalls; i++) {
045 graphics.lineTo(balls[i].x, balls[i].y);
046 }
047 graphics.lineTo(balls[0].x, balls[0].y);
048
049 //sortZ(); //注意:这里不能加z轴排序，因为z轴排序会不断修正小球的数组索引，导致上面的每跟线条的连接两端不断变化，在视觉上就产生了抖动
050 }
051
052 //x轴的坐标旋转
053 function rotateX(ball:Ball3D, angleX:Number):void {
054 var cosX:Number=Math.cos(angleX);
055 var sinX:Number=Math.sin(angleX);
056 var y1:Number=ball.ypos*cosX-ball.zpos*sinX;
057 var z1:Number=ball.zpos*cosX+ball.ypos*sinX;
058 ball.ypos=y1;
059 ball.zpos=z1;
060 }
061
062 //y轴的坐标旋转
063 function rotateY(ball:Ball3D, angleY:Number):void {
064 var cosY:Number=Math.cos(angleY);
065 var sinY:Number=Math.sin(angleY);
066 var x1:Number=ball.xpos*cosY-ball.zpos*sinY;
067 var z1:Number=ball.zpos*cosY+ball.xpos*sinY;
068 ball.xpos=x1;
069 ball.zpos=z1;
070 }
071
072 //z轴的坐标旋转
073 function rotateZ(ball:Ball3D, angleZ:Number):void {
074 var cosZ:Number=Math.cos(angleZ);
075 var sinZ:Number=Math.sin(angleZ);
076 var x1:Number=ball.xpos*cosZ-ball.ypos*sinZ;
077 var y1:Number=ball.ypos*cosZ+ball.xpos*sinZ;
078 ball.xpos=x1;
079 ball.ypos=y1;
080 }
081
082 //3D透视处理
083 function doPerspective(ball:Ball3D):void {
084 if (ball.zpos>- fl) {
085 var scale:Number = fl / (fl + ball.zpos);
086 ball.scaleX=ball.scaleY=scale;
087 ball.x=vpx+ball.xpos*scale;
088 ball.y=vpy+ball.ypos*scale;
089 //ball.alpha = scale*0.65;
090 ball.visible=true;
091 } else {
092 ball.visible=false;
093 }
094 }
095
096 //z轴排序
097 function sortZ():void {
098 balls.sortOn("zpos",Array.DESCENDING|Array.NUMERIC);
099 for (var i:uint=0; i<numBalls; i++) {
100 setChildIndex(balls[i],i);
101 }
102 }
103
104 init();
如果从性能优化的角度考虑：Ball3D类用在这里比较浪费，Ball3D继承自Sprite，而我们在这里其实仅仅只要一个拥有少数几个属性(比如xpos,ypos,zpos之类)的点而已，对于Sprite默认的其它属性，包括事件支持，都是不需要的。
所以...我们又多出了一个新类Point3D
01 package {
02 public class Point3D {
03 public var fl:Number=250;
04 private var vpX:Number=0;
05 private var vpY:Number=0;
06 private var cX:Number=0;
07 private var cY:Number=0;
08 private var cZ:Number=0;
09 public var x:Number=0;
10 public var y:Number=0;
11 public var z:Number=0;
12
13 public function Point3D(x:Number=0, y:Number=0, z:Number=0) {
14 this.x=x;
15 this.y=y;
16 this.z=z;
17 }
18 public function setVanishingPoint(vpX:Number, vpY:Number):void {
19 this.vpX=vpX;
20 this.vpY=vpY;
21 }
22 public function setCenter(cX:Number,cY:Number,cZ:Number=0):void {
23 this.cX=cX;
24 this.cY=cY;
25 this.cZ=cZ;
26 }
27 public function get screenX():Number {
28 var scale:Number = fl / (fl + z + cZ);
29 return vpX + cX + x * scale;
30 }
31 public function get screenY():Number {
32 var scale:Number = fl / (fl + z + cZ);
33 return vpY + cY + y * scale;
34 }
35 public function rotateX(angleX:Number):void {
36 var cosX:Number=Math.cos(angleX);
37 var sinX:Number=Math.sin(angleX);
38 var y1:Number=y*cosX-z*sinX;
39 var z1:Number=z*cosX+y*sinX;
40 y=y1;
41 z=z1;
42 }
43 public function rotateY(angleY:Number):void {
44 var cosY:Number=Math.cos(angleY);
45 var sinY:Number=Math.sin(angleY);
46 var x1:Number=x*cosY-z*sinY;
47 var z1:Number=z*cosY+x*sinY;
48 x=x1;
49 z=z1;
50 }
51 public function rotateZ(angleZ:Number):void {
52 var cosZ:Number=Math.cos(angleZ);
53 var sinZ:Number=Math.sin(angleZ);
54 var x1:Number=x*cosZ-y*sinZ;
55 var y1:Number=y*cosZ+x*sinZ;
56 x=x1;
57 y=y1;
58 }
59 }
60 }
利用这个类重写最开头的示例：
01 package {
02 import flash.display.Sprite;
03 import flash.events.Event;
04 public class Lines3D_B extends Sprite {
05 private var points:Array;
06 private var numPoints:uint=50;
07 private var fl:Number=250;
08 private var vpX:Number=stage.stageWidth/2;
09 private var vpY:Number=stage.stageHeight/2;
10
11 public function Lines3D_B() {
12 init();
13 }
14 private function init():void {
15 points = new Array();
16 for (var i:uint = 0; i < numPoints; i++) {
17 var point:Point3D=new Point3D(Math.random()*200-100,Math.random()*200-100,Math.random()*200-100);
18 point.setVanishingPoint(vpX, vpY);
19 points.push(point);
20 }
21 addEventListener(Event.ENTER_FRAME, onEnterFrame);
22 }
23 private function onEnterFrame(event:Event):void {
24 var angleX:Number = (mouseY - vpY) * .001;
25 var angleY:Number = (mouseX - vpX) * .001;
26 for (var i:uint = 0; i < numPoints; i++) {
27 var point:Point3D=points[i];
28 point.rotateX(angleX);
29 point.rotateY(angleY);
30 }
31 graphics.clear();
32 graphics.lineStyle(0);
33 graphics.moveTo(points[0].screenX, points[0].screenY);
34 for (i = 1; i < numPoints; i++) {
35 graphics.lineTo(points[i].screenX, points[i].screenY);
36 }
37 }
38 }
39 }
上面的示例各线条的节点都是随机分布在三维空间的，如果把这些点按一定的顺序排列好，结果会更有趣：
上图示意了一个z轴平面的正方形，其4个顶点的(x,y,z)坐标如图所示
01 package {
02 import flash.display.Sprite;
03 import flash.events.Event;
04 public class Square3D extends Sprite {
05 private var points:Array;
06 private var numPoints:uint=4;
07 private var fl:Number=250;
08 private var vpX:Number=stage.stageWidth/2;
09 private var vpY:Number=stage.stageHeight/2;
10 public function Square3D() {
11 init();
12 }
13
14 private function init():void {
15 points = new Array();
16 points[0]=new Point3D(-80,-80,50);
17 points[1]=new Point3D(80,-80,50);
18 points[2]=new Point3D(80,80,50);
19 points[3]=new Point3D(-80,80,50);
20
21 //设置每个点的消失点
22 for (var i:uint = 0; i < numPoints; i++) {
23 points[i].setVanishingPoint(vpX, vpY);
24 }
25
26 addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
27 }
28 private function EnterFrameHandler(e:Event):void {
29 var dx:Number = mouseX - vpX;
30 var dy:Number = mouseY - vpY;
31
32 var angleX:Number = dy * 0.001;
33 var angleY:Number = dx * 0.001;
34 var angleZ:Number = Math.sqrt(dx*dx+dy*dy)*0.0005;
35 if (dx>0){angleZ*=-1;}
36 for (var i:uint = 0; i < numPoints; i++) {
37 var point:Point3D=points[i];
38 point.rotateX(angleX);
39 point.rotateY(angleY);
40 point.rotateZ(angleZ);
41 }
42 graphics.clear();
43 graphics.lineStyle(0);
44 graphics.moveTo(points[0].screenX, points[0].screenY);
45 for (i = 1; i < numPoints; i++) {
46 graphics.lineTo(points[i].screenX, points[i].screenY);
47 }
48 graphics.lineTo(points[0].screenX, points[0].screenY);
49 }
50 }
51 }
ok，我们成功的搞出了一个在三维空间晃荡的正方形!
理解这种思路后，理论上可以做出任意的几何形状，比如下面这张图：
01 var pointNum:int=10;
02 var points:Array = new Array();
03 var vpX:Number=stage.stageWidth/2;
04 var vpY:Number=stage.stageHeight/2;
05
06 function Init():void {
07 points.push(new Point3D(-100,-140,0));
08 points.push(new Point3D(100,-140,0));
09 points.push(new Point3D(100,-90,0));
10 points.push(new Point3D(-40,-90,0));
11 points.push(new Point3D(-40,-40,0));
12 points.push(new Point3D(80,-40,0));
13 points.push(new Point3D(80,10,0));
14 points.push(new Point3D(-40,10,0));
15 points.push(new Point3D(-40,140,0));
16 points.push(new Point3D(-100,140,0));
17
18 for (var i:uint = 0; i < pointNum; i++) {
19 points[i].setVanishingPoint(vpX, vpY);
20 points[i].setCenter(0, 0, 100);
21 }
22 addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
23 }
24
25
26 function EnterFrameHandler(e:Event):void {
27 var dx:Number=mouseX-vpX;
28 var dy:Number=mouseY-vpY;
29 var angleX:Number=dy*0.001;
30 var angleY:Number=dx*0.001;
31 var angleZ:Number=Math.sqrt(dx*dx+dy*dy)*0.0005;
32 if (dx>0) {
33 angleZ*=-1;
34 }
35 for (var i:uint = 0; i < pointNum; i++) {
36 var point:Point3D=points[i];
37 point.rotateX(angleX);
38 point.rotateY(angleY);
39 point.rotateZ(angleZ);
40 }
41 Draw();
42 }
43
44 function Draw():void {
45 graphics.clear();
46 graphics.lineStyle(1);
47 graphics.beginFill(0xff0000);
48 graphics.moveTo(points[0].screenX,points[0].screenY);
49 for (var i:uint=1; i<pointNum; i++) {
50 graphics.lineTo(points[i].screenX,points[i].screenY);
51 }
52 graphics.lineTo(points[0].screenX,points[0].screenY);
53 graphics.endFill();
54 }
55
56 Init();
如果形状是没有空洞的，上面的办法无疑是最方便的办法，但是如果形状本身上有“洞”，比如下面这样：
如果仍然套用上面的方法，至少还得多写段代码处理中间这个空洞的"画线"，再极端一点想象：如果形状中的空洞不止一个，有很多个的话，处理的代码就更复杂了。通常在3D编程中，业内更倾向于用“三角形”来处理这种复杂情况。如上图所示：整个A可以看作是0到10一共是11个小三角形组成的，可以先把三角形抽象成一个类
01 package
02 {
03 import flash.display.Graphics;
04 public class Triangle
05 {
06 private var pointA:Point3D;
07 private var pointB:Point3D;
08 private var pointC:Point3D;
09 private var color:uint;
10 public function Triangle(a:Point3D, b:Point3D, c:Point3D, color:uint)
11 {
12 pointA = a;
13 pointB = b;
14 pointC = c;
15 this.color = color;
16 }
17 public function draw(g:Graphics):void
18 {
19 g.beginFill(color);
20 g.moveTo(pointA.screenX, pointA.screenY);
21 g.lineTo(pointB.screenX, pointB.screenY);
22 g.lineTo(pointC.screenX, pointC.screenY);
23 g.lineTo(pointA.screenX, pointA.screenY);
24 g.endFill();
25 }
26 }
27 }
接下来的事情就比较简单了，定义一个三角形数组，然后根据顶点坐标初始化这个数组，然后各顶点的坐标该咋旋转就咋旋转，完事之后重新填充绘制三角形数组。
01 var pointNum:int = 11;
02 var points:Array = new Array(pointNum);
03 var triangles:Array;//三角形数组
04 var vpX:Number = stage.stageWidth / 2;
05 var vpY:Number = stage.stageHeight / 2;
06
07 function Init():void {
08 points[0] = new Point3D(-50,-250,100);
09 points[1] = new Point3D(50,-250,100);
10 points[2] = new Point3D(200,250,100);
11 points[3] = new Point3D(100,250,100);
12 points[4] = new Point3D(50,100,100);
13 points[5] = new Point3D(-50,100,100);
14 points[6] = new Point3D(-100,250,100);
15 points[7] = new Point3D(-200,250,100);
16 points[8] = new Point3D(0,-150,100);
17 points[9] = new Point3D(50,0,100);
18 points[10] = new Point3D(-50,0,100);
19 for (var i:uint = 0; i < pointNum; i++) {
20 points[i].setVanishingPoint(vpX, vpY);
21 points[i].setCenter(0, 0, 450);
22 }
23
24 //根据顶点赋值三角形数组
25 triangles = new Array();
26 triangles[0] = new Triangle(points[0],points[1],points[8],0xff0000);
27 triangles[1] = new Triangle(points[1],points[9],points[8],0xff0000);
28 triangles[2] = new Triangle(points[1],points[2],points[9],0xff0000);
29 triangles[3] = new Triangle(points[2],points[4],points[9],0xff0000);
30 triangles[4] = new Triangle(points[2],points[3],points[4],0xff0000);
31 triangles[5] = new Triangle(points[4],points[5],points[9],0xff0000);
32 triangles[6] = new Triangle(points[9],points[5],points[10],0xff0000);
33 triangles[7] = new Triangle(points[5],points[6],points[7],0xff0000);
34 triangles[8] = new Triangle(points[5],points[7],points[10],0xff0000);
35 triangles[9] = new Triangle(points[0],points[10],points[7],0xff0000);
36 triangles[10] = new Triangle(points[0],points[8],points[10],0xff0000);
37
38 addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
39 }
40
41 function EnterFrameHandler(e:Event):void {
42 var dx:Number = mouseX - vpX;
43 var dy:Number = mouseY - vpY;
44 var angleX:Number = dy * 0.001;
45 var angleY:Number = dx * 0.001;
46 var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;
47 if (dx > 0) {
48 angleZ *= -1;
49 }
50
51 for (var i:uint = 0; i < pointNum; i++) {
52 var point:Point3D = points[i];
53 point.rotateX(angleX);
54 point.rotateY(angleY);
55 point.rotateZ(angleZ);
56 }
57 graphics.clear();
58
59 //画三角形
60 for (i=0; i<triangles.length; i++) {
61 triangles[i].draw(graphics);
62 }
63 }
64
65 Init();
旋转的立方体
示意图如下:
01 var pointNum:int = 8;
02 var points:Array = new Array(pointNum);
03 var triangles:Array;//三角形数组
04 var vpX:Number = stage.stageWidth / 2;
05 var vpY:Number = stage.stageHeight / 2;
06
07 function Init():void {
08 //前面四个角
09 points[0] = new Point3D(-100,-100,-100);
10 points[1] = new Point3D( 100,-100,-100);
11 points[2] = new Point3D( 100, 100,-100);
12 points[3] = new Point3D(-100, 100,-100);
13 //后面四个角
14 points[4] = new Point3D(-100,-100, 100);
15 points[5] = new Point3D( 100,-100, 100);
16 points[6] = new Point3D( 100, 100, 100);
17 points[7] = new Point3D(-100, 100, 100);
18
19 for (var i:uint = 0; i < pointNum; i++) {
20 points[i].setVanishingPoint(vpX, vpY);
21 points[i].setCenter(0, 0, 100);
22 }
23
24 //根据顶点赋值三角形数组
25 triangles = new Array();
26
27 var _t:Number = Math.random() * 0xffffff;
28
29 triangles[0] = new Triangle(points[0],points[1],points[2],_t);
30 triangles[1] = new Triangle(points[0],points[2],points[3],_t);
31
32 _t = Math.random() * 0xffffff;
33 triangles[2] = new Triangle(points[0],points[5],points[1],_t);
34 triangles[3] = new Triangle(points[0],points[4],points[5],_t);
35
36 _t = Math.random() * 0xffffff;
37 triangles[4] = new Triangle(points[4],points[6],points[5],_t);
38 triangles[5] = new Triangle(points[4],points[7],points[6],_t);
39
40 _t = Math.random() * 0xffffff;
41 triangles[6] = new Triangle(points[3],points[2],points[6],_t);
42 triangles[7] = new Triangle(points[3],points[6],points[7],_t);
43
44 _t = Math.random() * 0xffffff;
45 triangles[8] = new Triangle(points[1],points[5],points[6],_t);
46 triangles[9] = new Triangle(points[1],points[6],points[2],_t);
47
48 _t = Math.random() * 0xffffff;
49 triangles[10] = new Triangle(points[4],points[0],points[3],_t);
50 triangles[11] = new Triangle(points[4],points[3],points[7],_t);
51
52 addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
53 }
54
55 function EnterFrameHandler(e:Event):void {
56 var dx:Number = mouseX - vpX;
57 var dy:Number = mouseY - vpY;
58 var angleX:Number = dy * 0.001;
59 var angleY:Number = dx * 0.001;
60 var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;
61 if (dx > 0) {
62 angleZ *= -1;
63 }
64
65 for (var i:uint = 0; i < pointNum; i++) {
66 var point:Point3D = points[i];
67 point.rotateX(angleX);
68 point.rotateY(angleY);
69 point.rotateZ(angleZ);
70 }
71 graphics.clear();
72
73 //画三角形
74 for (i=0; i<triangles.length; i++) {
75 triangles[i].draw(graphics);
76 }
77 }
78
79 Init();
当然，在学习"背面剔除"前，为了防止六个面同时填充颜色相互遮挡，我们可以先把Triangle.cs中的draw方法临时修改一下
1 public function draw(g:Graphics):void
2 {
3 g.beginFill(color,0.4);//改成40%透明度填充
4 g.moveTo(pointA.screenX, pointA.screenY);
5 g.lineTo(pointB.screenX, pointB.screenY);
6 g.lineTo(pointC.screenX, pointC.screenY);
7 g.lineTo(pointA.screenX, pointA.screenY);
8 g.endFill();
9 }
利用这个原理，可以创建更多复杂的3D模型
3D金字塔型：
01 var pointNum:int = 5;
02 var points:Array = new Array(pointNum);
03 var triangles:Array;//三角形数组
04 var vpX:Number = stage.stageWidth / 2;
05 var vpY:Number = stage.stageHeight / 2;
06
07 function Init():void {
08 points[0] = new Point3D(0,-200,0);
09 points[1] = new Point3D(200,200,-200);
10 points[2] = new Point3D(-200,200,-200);
11 points[3] = new Point3D(-200,200,200);
12 points[4] = new Point3D(200,200,200);
13
14 for (var i:uint = 0; i < pointNum; i++) {
15 points[i].setVanishingPoint(vpX, vpY);
16 points[i].setCenter(0, 0, 450);
17 }
18
19 //根据顶点赋值三角形数组
20 triangles = new Array();
21
22 var _t:Number = Math.random() * 0xffffff;
23 triangles[0] = new Triangle(points[0],points[1],points[2],_t);
24 _t = Math.random() * 0xffffff;
25 triangles[1] = new Triangle(points[0],points[2],points[3],_t);
26 _t = Math.random() * 0xffffff;
27 triangles[2] = new Triangle(points[0],points[3],points[4],_t);
28 _t = Math.random() * 0xffffff;
29 triangles[3] = new Triangle(points[0],points[4],points[1],_t);
30 _t = Math.random() * 0xffffff;
31 triangles[4] = new Triangle(points[1],points[3],points[2],_t);
32 //_t = Math.random() * 0xffffff;
33 triangles[5] = new Triangle(points[1],points[4],points[3],_t);
34
35 addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
36 }
37
38 function EnterFrameHandler(e:Event):void {
39 var dx:Number = mouseX - vpX;
40 var dy:Number = mouseY - vpY;
41 var angleX:Number = dy * 0.001;
42 var angleY:Number = dx * 0.001;
43 var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;
44 if (dx > 0) {
45 angleZ *= -1;
46 }
47
48 for (var i:uint = 0; i < pointNum; i++) {
49 var point:Point3D = points[i];
50 point.rotateX(angleX);
51 point.rotateY(angleY);
52 point.rotateZ(angleZ);
53 }
54 graphics.clear();
55
56 //画三角形;
57 for (i=0; i<triangles.length; i++) {
58 triangles[i].draw(graphics);
59 }
60 }
61
62 Init();
把前面示例中的A字型示例扩展一下，变成二层(即：再复制一层A，然后在z轴上推移若干距离，然后用线条连起来)
001 var pointNum:int = 22;
002 var points:Array = new Array(pointNum);
003 var triangles:Array;//三角形数组
004 var vpX:Number = stage.stageWidth / 2;
005 var vpY:Number = stage.stageHeight / 2;
006
007 function Init():void {
008 points[0] = new Point3D(-50,-250,-50);
009 points[1] = new Point3D(50,-250,-50);
010 points[2] = new Point3D(200,250,-50);
011 points[3] = new Point3D(100,250,-50);
012 points[4] = new Point3D(50,100,-50);
013 points[5] = new Point3D(-50,100,-50);
014 points[6] = new Point3D(-100,250,-50);
015 points[7] = new Point3D(-200,250,-50);
016 points[8] = new Point3D(0,-150,-50);
017 points[9] = new Point3D(50,0,-50);
018 points[10] = new Point3D(-50,0,-50);
019 points[11] = new Point3D(-50,-250,50);
020 points[12] = new Point3D(50,-250,50);
021 points[13] = new Point3D(200,250,50);
022 points[14] = new Point3D(100,250,50);
023 points[15] = new Point3D(50,100,50);
024 points[16] = new Point3D(-50,100,50);
025 points[17] = new Point3D(-100,250,50);
026 points[18] = new Point3D(-200,250,50);
027 points[19] = new Point3D(0,-150,50);
028 points[20] = new Point3D(50,0,50);
029 points[21] = new Point3D(-50,0,50);
030
031 for (var i:uint = 0; i < pointNum; i++) {
032 points[i].setVanishingPoint(vpX, vpY);
033 points[i].setCenter(0, 0, 450);
034 }
035
036 //根据顶点赋值三角形数组
037 triangles = new Array();
038
039 var _t:Number = Math.random()*0xffffff;
040 //_t = 0xff0000;
041
042 triangles[0] = new Triangle(points[0],points[1],points[8],_t);
043 triangles[1] = new Triangle(points[1],points[9],points[8],_t);
044 triangles[2] = new Triangle(points[1],points[2],points[9],_t);
045 triangles[3] = new Triangle(points[2],points[4],points[9],_t);
046 triangles[4] = new Triangle(points[2],points[3],points[4],_t);
047 triangles[5] = new Triangle(points[4],points[5],points[9],_t);
048 triangles[6] = new Triangle(points[9],points[5],points[10],_t);
049 triangles[7] = new Triangle(points[5],points[6],points[7],_t);
050 triangles[8] = new Triangle(points[5],points[7],points[10],_t);
051 triangles[9] = new Triangle(points[0],points[10],points[7],_t);
052 triangles[10] = new Triangle(points[0],points[8],points[10],_t);
053
054 _t = Math.random()*0xffffff;
055 //_t = 0x000000;
056
057 triangles[11] = new Triangle(points[11],points[19],points[12],_t);
058 triangles[12] = new Triangle(points[12],points[19],points[20],_t);
059 triangles[13] = new Triangle(points[12],points[20],points[13],_t);
060 triangles[14] = new Triangle(points[13],points[20],points[15],_t);
061 triangles[15] = new Triangle(points[13],points[15],points[14],_t);
062 triangles[16] = new Triangle(points[15],points[20],points[16],_t);
063 triangles[17] = new Triangle(points[20],points[21],points[16],_t);
064 triangles[18] = new Triangle(points[16],points[18],points[17],_t);
065 triangles[19] = new Triangle(points[16],points[21],points[18],_t);
066 triangles[20] = new Triangle(points[11],points[18],points[21],_t);
067 triangles[21] = new Triangle(points[11],points[21],points[19],_t);
068
069 _t = Math.random()*0xffffff;
070 //_t = 0x0000ff;
071
072 triangles[22] = new Triangle(points[0],points[11],points[1],_t);
073 triangles[23] = new Triangle(points[11],points[12],points[1],_t);
074 triangles[24] = new Triangle(points[1],points[12],points[2],_t);
075 triangles[25] = new Triangle(points[12],points[13],points[2],_t);
076 triangles[26] = new Triangle(points[3],points[2],points[14],_t);
077 triangles[27] = new Triangle(points[2],points[13],points[14],_t);
078 triangles[28] = new Triangle(points[4],points[3],points[15],_t);
079 triangles[29] = new Triangle(points[3],points[14],points[15],_t);
080 triangles[30] = new Triangle(points[5],points[4],points[16],_t);
081 triangles[31] = new Triangle(points[4],points[15],points[16],_t);
082 triangles[32] = new Triangle(points[6],points[5],points[17],_t);
083 triangles[33] = new Triangle(points[5],points[16],points[17],_t);
084 triangles[34] = new Triangle(points[7],points[6],points[18],_t);
085 triangles[35] = new Triangle(points[6],points[17],points[18],_t);
086 triangles[36] = new Triangle(points[0],points[7],points[11],_t);
087 triangles[37] = new Triangle(points[7],points[18],points[11],_t);
088 triangles[38] = new Triangle(points[8],points[9],points[19],_t);
089 triangles[39] = new Triangle(points[9],points[20],points[19],_t);
090 triangles[40] = new Triangle(points[9],points[10],points[20],_t);
091 triangles[41] = new Triangle(points[10],points[21],points[20],_t);
092 triangles[42] = new Triangle(points[10],points[8],points[21],_t);
093 triangles[43] = new Triangle(points[8],points[19],points[21],_t);
094
095 addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
096 }
097
098 function EnterFrameHandler(e:Event):void {
099 var dx:Number = mouseX - vpX;
100 var dy:Number = mouseY - vpY;
101 var angleX:Number = dy * 0.001;
102 var angleY:Number = dx * 0.001;
103 var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;
104 if (dx > 0) {
105 angleZ *= -1;
106 }
107
108 for (var i:uint = 0; i < pointNum; i++) {
109 var point:Point3D = points[i];
110 point.rotateX(angleX);
111 point.rotateY(angleY);
112 point.rotateZ(angleZ);
113 }
114 graphics.clear();
115
116 //画三角形;
117 for (i=0; i<triangles.length; i++) {
118 triangles[i].draw(graphics);
119 }
120 }
121
122 Init();
3D旋转的圆筒：
01 var pointNum:int = 40;
02 var numFaces:int = 20;
03 var points:Array = new Array(pointNum);
04 var triangles:Array;//三角形数组
05 var vpX:Number = stage.stageWidth / 2;
06 var vpY:Number = stage.stageHeight / 2;
07
08 function Init():void {
09 points = new Array();
10 triangles = new Array();
11 var index:uint = 0;
12 for (var i:uint = 0; i < numFaces; i++) {
13 var angle:Number = Math.PI * 2 / numFaces * i;
14 var xpos:Number = Math.cos(angle) * 200;
15 var ypos:Number = Math.sin(angle) * 200;
16 points[index] = new Point3D(xpos,ypos,-100);
17 points[index + 1] = new Point3D(xpos,ypos,100);
18 index += 2;
19 }
20 for (i = 0; i < points.length; i++) {
21 points[i].setVanishingPoint(vpX, vpY);
22 points[i].setCenter(0, 0, 300);
23 }
24 index = 0;
25 var _t:Number = 0;
26 for (i = 0; i < numFaces - 1; i++) {
27 _t = Math.random() * 0xffffff;
28 triangles[index] = new Triangle(points[index],points[index + 3],points[index + 1],_t);
29 triangles[index + 1] = new Triangle(points[index],points[index + 2],points[index + 3],_t);
30 index += 2;
31 }
32 triangles[index] = new Triangle(points[index],points[1],points[index + 1],_t);
33 triangles[index + 1] = new Triangle(points[index],points[0],points[1],_t);
34 addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
35 }
36
37 function EnterFrameHandler(e:Event):void {
38 var dx:Number = mouseX - vpX;
39 var dy:Number = mouseY - vpY;
40 var angleX:Number = dy * 0.001;
41 var angleY:Number = dx * 0.001;
42 var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;
43 if (dx > 0) {
44 angleZ *= -1;
45 }
46
47 for (var i:uint = 0; i < pointNum; i++) {
48 var point:Point3D = points[i];
49 point.rotateX(angleX);
50 point.rotateY(angleY);
51 point.rotateZ(angleZ);
52 }
53 graphics.clear();
54
55 //画三角形;
56 for (i=0; i<triangles.length; i++) {
57 triangles[i].draw(graphics);
58 }
59 }
60
61 Init();
这个的处理思路跟前面的有些不同：先弄二个同心圆，但一个在前，一个在后，前后错开。然后每个圆等分，得到一系列点，然后把这二个圆上的点连接起来，得到一系列的三角形面。
注：为了更直观的显示，Triangle.cs的draw方法还要增加一行g.lineStyle(1,0x454545); 用来勾划三角形的连线。
浙公网安备 33010602011771号