Maso Blog: 教學：3D選單

多年前教書用的教案，轉貼過來
課程目標
-學習用 Action Script 虛擬3D空間
-利用3D技術擴展視覺效果
-製作3D選單

00.課前準備知識
Flash本身是2D多媒體開發工具，其座標系統只有X及Y兩個座標軸。但3D空間需要X、Y及Z三個軸向才可實現，因此首要任務便是利用Action Script在Flash中虛擬一個3D空間，讓每個物件皆包含X、Y及Z三個座標值。

設定好3D座標後，便要考慮如何將3D座標投影至電腦畫面上的2D座標，此為虛擬3D技術的第一個重點。

以下圖說明之：

Viewpoint指的是觀賞者視點。
Projection plane 是指投影平面，也可說是電腦螢幕。
d 是視點到投影平面的距離。
z 是視點到虛擬物的距離
仔細看X1及X2字下方的黑點，假設虛擬空間中存在一個黑點(point in space)，它在虛擬空間中的x座標為X2，當觀賞者透過螢幕看這個黑點時，黑點的影向是投射在螢幕上(point projected on projection plane)的x座標為X2。

透過上述原理，再利用斜率一致的特性，可知：
X1/d=X2/z
得 X1=X2*(d/z)
同理 Y1=Y2*(d/z)

X2、Y2都是虛擬空間中的座標，因此只要乘以(d/z)即可知道投影到畫面上的X1及Y2。
z是物體的z座標，由我們自訂。
而d是視點到投影平面的距離，d也可由我們自訂，不過不同的d值會有不同的效果，就像鏡頭前進或後退的差異，可在開發過程中視狀況調整。

除了x、y需要設定外，還需要設定_xscale、_yscale，以表現近大遠小的縮放效果。_xscale及_yscale的縮放原理就跟x、y換算一樣，利用(d/z) 來計算。

_xscale = _yscale=100*(d/z);

整理上述，可歸納如下：

接下來我們只要設定好物體在虛擬空間中的x、y、z，不論位在何處，皆可換算出它投影到螢幕上的座標及大小。

01.產生3D投影
首先任意畫一個圓形圖案，可加入少許立體效果，畫好後轉換成MC，並設好Linkage名稱”ball"

主場景上不放任何物件，在Frame上撰寫AS：

cx、cy是畫面中心點，各是stage長寬(550x400)的一半。
eyeD是視點到投影平面的距離，此範例設500，學員可自行調整看效果差界，但記得不要設為負數。
setBallPos函式則是上一節所得到的換算公式。
最後產生球體，以attachMovie產生，同時設定它的x、y、z。此範例以亂數設定，學員也可自行設定到特定位置，並發佈測試比較不同位置呈現的效果。

單純把球體畫在畫面上，可能感受不到明顯的立體效果，若是球體能在空間中移動，應該就能觀察出空間感。

我們加入簡單的移動功能，以方向鍵及「-」「+」鍵來控制球的六方向移動：

關於鍵盤控制，在此不多贅述，但請記得每次移動球體後，都要做setBallPos(ball)的動作，畫面上的球體才會更新位置大小。

發佈測試結果，以鍵盤控制球體，觀察球體移動及大小的變化。
檔案：01_產生3D投影.fla

02.產生多個球體
利用上一節的原理，試試一次產生多個球體：

程式碼如下：

與上一節範例十分類似，唯一不同在一開始多了個sum變數，決定要產生幾個球體，setBallPos函式與上節範例相同，而最後產生球的部份改以for廻圈產生sum設定的球體數量。

發佈測試結果
檔案：02_產生3D投影多捄.fla

03.旋轉
在01的範例中，我們試著用鍵盤控制六方向移動，但都是直線行進；若是能弧形移動，則更能表現虛擬空間的立體感。

假設我們知道物體離圓心的距離，也知道旋轉的角度，那該如何算出它的x、y位置？

sinθ=y/r
cosθ=x/r
y=r* sinθ
x=r* cosθ

透過上述原理，瞭解三角函數與座標計算的關係。

下圖表示一個座標值以弧形移動的狀況

(x,y,0)是第一個位置，它是位在角度a的位置上，接著它以z為軸心，向上移動了角度b，來到(x’,y’,0)的位置。

x= r * cos(a)
y= r * sin(a)
z=0

x’= r * cos(a+b)
y’= r * sin(a+b)
z’=0

根據三角函數公式，可再換算成：
x’= r * cos(a+b) = r * (cos(a)*cos(b) – sin(a)*sin(b)) = x * cos(b) – y * sin(b)
y’= r * sin(a+b) = r * (sin(a)*cos(b) + cos(a) *sin(b)) = y * cos(b) + x * sin(b)
z’=0

以上是以z軸旋轉的公式，整理三個軸向公式如下：

X軸旋轉
x’=x
y’=y*cosθ+z*sinθ
z’=z*cosθ-y*sinθ

Y軸旋轉
x’=x*cosθ-z*sinθ
y’=y
z’=z*cosθ+x*sinθ

Z軸旋轉
x’=x*cosθ-y*sinθ
y’= y*cosθ+x*sinθ
z’=z

利用上述原理，我們實作一個沿x軸旋轉的範例，每次旋轉5度。

檔案：03_多球單軸自轉.fla

04.手動旋轉
上一節學會了旋轉的原理，接下來可試著將旋轉功能轉變成手動旋轉。這一節與上一節大致相同，唯一不同是利用滑鼠位置來設定旋轉角度。

檔案：04_多球單軸手動轉x.fla

05. Y軸轉動
同樣之前的做法，改以Y軸轉動。

檔案：05_多球單軸手動轉y.fla

06. 多軸向旋轉
利用之前介紹的公式，即可設定X軸及Y軸的旋轉，不過要注意當雙軸同時轉動時，必需先計算一個軸向，再以此結果套入第二個軸向的公式。
可以視為先轉其一再轉其二來看待。