Flash基礎理論課 第十六章 3D線條與填充Ⅰ

返回“Flash基礎理論課 - 目錄”

第十五章我們介紹了3D，但只是將物體置於3D空間中，設定大小與位置。物體實際上還是2D的。這就像老的3D遊戲中，我們可以繞著某個物體或人物走，這些對象會轉過來面對我們。這些物體或人物並不是真正的會轉過來 —— 只是看上去是這樣的，因為它們都是2D 物體，那是我們看到它唯一的一個視角。

本章，我們將真正地在 Flash中建立3D 模型。具體說來有建立並使用3D 點，線條，填充以及立體圖形。學習完本章，大家就可以任意在三維空間中建立各種形狀，並對它們執行移動和旋轉。

建立點和線條

如果只在 3D中建立點而不建立線條的話是沒有任何意義的。因為理論上講，一個點是沒有維度並且不可見的。開始時，我們還將使用Ball3D 類，給一個非常小的半徑，只要能看到點在哪就夠了。這樣，只需要再建立幾條線將這些小球連起來就行了。相當簡單。我們前面做過這樣的例子，不過這次要在小球上添加透視，將它們放入3D空間。

可以將點的執行個體設為黑色，10 像素寬。建立一些點的執行個體，根據滑鼠的位置對它們進行旋轉（如前一章最後所講的一樣），然後在點間繪製一些線條。代碼與上一章的RotateXY.as檔案幾乎相同。主要的區別在 onEnterFrame的最後一塊兒，從第一個點迴圈繪製線條到剩下所有的點。同時，我還刪除了sortZ 方法，因為在這裡有沒有都一樣。以下是Lines3D1.as的全部代碼。運行結果如圖 16-1 所示。

package {
　import flash.display.Sprite;
　import flash.events.Event;
　public class Lines3D1 extends Sprite {
　 private var balls:Array;
　 private var numBalls:uint = 50;
　 private var fl:Number = 250;
　 private var vpX:Number = stage.stageWidth / 2;
　 private var vpY:Number = stage.stageHeight / 2;
　 public function Lines3D1() {
　　 init();
　 }
　 private function init():void {
　　 balls = new Array();
　　 for (var i:uint = 0; i < numBalls; i++) {
　　　 var ball:Ball3D = new Ball3D(5, 0);
　　　 balls.push(ball);
　　　 ball.xpos = Math.random() * 200 - 100;
　　　 ball.ypos = Math.random() * 200 - 100;
　　　 ball.zpos = Math.random() * 200 - 100;
　　　 addChild(ball);
　　 }
　　 addEventListener(Event.ENTER_FRAME, onEnterFrame);
　 }
　 private function onEnterFrame(event:Event):void {
　　 var angleX:Number = (mouseY - vpY) * .001;
　　 var angleY:Number = (mouseX - vpX) * .001;
　　 for (var i:uint = 0; i < numBalls; i++) {
　　　 var ball:Ball3D = balls[i];
　　　 rotateX(ball, angleX);
　　　 rotateY(ball, angleY);
　　　 doPerspective(ball);
　　 }
　　 graphics.clear();
　　 graphics.lineStyle(0);
　　 graphics.moveTo(balls[0].x, balls[0].y);
　　 for (i = 1; i < numBalls; i++) {
　　　 graphics.lineTo(balls[i].x, balls[i].y);
　　 }
　 }
　 private function rotateX(ball:Ball3D, angleX:Number):void {
　　 var cosX:Number = Math.cos(angleX);
　　 var sinX:Number = Math.sin(angleX);
　　 var y1:Number = ball.ypos * cosX - ball.zpos * sinX;
　　 var z1:Number = ball.zpos * cosX + ball.ypos * sinX;
　　 ball.ypos = y1;
　　 ball.zpos = z1;
　 }
　 private function rotateY(ball:Ball3D, angleY:Number):void {
　　 var cosY:Number = Math.cos(angleY);
　　 var sinY:Number = Math.sin(angleY);
　　 var x1:Number = ball.xpos * cosY - ball.zpos * sinY;
　　 var z1:Number = ball.zpos * cosY + ball.xpos * sinY;
　　 ball.xpos = x1;
　　 ball.zpos = z1;
　 }
　 private function doPerspective(ball:Ball3D):void {
　　 if (ball.zpos > -fl) {
　　　 var scale:Number = fl / (fl + ball.zpos);
　　　 ball.scaleX = ball.scaleY = scale;
　　　 ball.x = vpX + ball.xpos * scale;
　　　 ball.y = vpY + ball.ypos * scale;
　　　 ball.visible = true;
　　 } else {
　　　 ball.visible = false;
　　 }
　 }
　}
}

圖16-1 3D 點與線