Flash與3D程式設計探秘(二) 靜態長方體

2021-06-01 01:20:33 字數 3662 閱讀 3667

靜態長方體

那麼接著上一節所討論的內容,來製作乙個靜態的長方體,並且讓它在螢幕上來回的運動。這個例子和上一節的例子非常的相似,同樣主要關心3d空間。不同的是,上一節我們利用了乙個事先畫好的小球,這一節改變方式,在程式執行時,計算出長方體的每個頂點的位置然後使用flash的圖形api繪製出乙個長方體,這樣在一系列的繪製後,所看到的就是長方體移動的動畫!

移動的靜態長方體

動畫製作步驟

1. 在這乙個例子中,需要發揮一下空間想象力去定位長方體的頂點。至於場景上的網格,我想大家可以先把它放在場景的底部,等動畫完成後再把它向上移動到合適的位置。

2. 開始和以前一樣,定義原點以及焦距。另外也要初始幾個常量。長方體圍繞y軸公轉,r是長方體公轉的半徑。

var pi 

=3.1415926535897932384626433832795

;var r 

=100;

var origin 

=new

object();

origin.x 

=stage.stagewidth/2

;origin.y 

=stage.stageheight/2

;origin.z =0

;var focal_length 

=300

;var angular_velocity =pi

/180

;var _angle_xz =0

; 3. 接下來定義乙個3d空間的點,長方體就圍繞這個點進行公轉。

var spin_center 

=new

object();

spin_center.x =0

;spin_center.y =0

;spin_center.z 

=100;

4. 建立乙個場景舞台,用來盛放繪製的長方體。建立乙個長方體的空sprite並且把它新增到舞台上。

var scene 

=new

sprite();

scene.x 

=origin.x;

scene.y 

=origin.y

this

.addchild(scene);

var box:sprite 

=new

sprite();

scene.addchild(box);

5. 下面需要乙個函式來建立3d空間的點,那麼下一次需要描述乙個3d空間的點時,只需要執行這個函式,並且傳入相應的x,y和z值即可。

function vertex(x, y, z):object

6. 你肯定猜到下一步要做的,那就是把乙個3d空間的點轉換成flash能夠理解的2d空間的點。轉換的原理和第一節是一樣的,這裡就不解釋了。

function convert(point3d, focal_length):object

7. 下一步也是主要關心的迴圈函式。首先我想你明確這個函式要做的工作,那就是計算出長方體每個頂點的3d座標,然後把它們轉化成2d座標,最後用flash的繪製api建立圖形。每一次函式執行,把長方體圍繞y軸旋轉的角度增加。然後根據這個角度,便可以計算出長方體中心點(對角線的交點)cente.x,center.y,center.z。很好,下面就可以確定這個長方體的每個點的座標了。在這裡我使用了乙個邊長為80正方體,你可以更改引數除錯出你喜歡的長方體。

注意

再第一篇到第六篇文章裡,物體的運動都是frame based的運動,不過長方體的運動你可以嘗試改為time based的運動。由於文章旨在讓讀者體會3d的樂趣,因此關於time based和frame based的運動的區別暫不關係,不過這個課題將會在第七篇討論。

俯瞰長方體的移動

那麼緊接著,使用之前寫的函式,把長方體的8個3d頂點轉換成2d點。然後用flash的繪製api繪製出來長方體。有一點想說明:假如你的正方體的中心的x是a,正方體的邊長是80,那麼可以得到它的左前上頂點的x為(a-40),它的右前上的x為(a+40),依此類推;進而可以得出其他頂點的座標以及它們的y和z。需要注意的是,在這裡是對空間中的點進行操作而不是對乙個sprite進行操作。

function move(e:event):

void

var center 

=new

object();

center.x =r

*math.cos(_angle_xz) 

+spin_center.x;

center.y =0

+spin_center.y;

center.z =r

*math.sin(_angle_xz) 

+spin_center.z;

var points =[

vertex(center.x-40

, -40, center.z-40

),    

vertex(center.x+40

, -40, center.z-40

),        

vertex(center.x+40

, -40, center.z+40

),vertex(center.x-40

, -40, center.z+40

),vertex(center.x-40

, 40

, center.z-40

),vertex(center.x+40

, 40

, center.z-40

),vertex(center.x+40

, 40

, center.z+40

),vertex(center.x-40

, 40

, center.z+40

)];for(var i =0

; i 

<

points.length; i++)

with (box.graphics)}

8. 最後在場景上新增乙個迴圈執行事件。

this

.addeventlistener(event.enter_frame, move);

我希望你能夠明確製作這個動畫的思路:建立場景,建立3d物體,把頂點轉換成為2d點,使用flash繪製。so far so good? great! 後面的文章將開始介紹攝像機以及相關的要素,希望你能跟上。

建議:

在你的腦海中建立乙個長方體應該不是很困難。我的方法是首先勾勒出正面,然後後面,上面,下面,左面和右面。如果你覺得用腦海想象比較困難的話,可以試著用筆和紙畫出乙個長方體,然後標出座標。

建議:

在flash裡,2d空間的原點在左上角(0,0)。在這上面的兩節的例子中,在程式一開始就把3d空間的原點向右再向下移動,那麼在螢幕上的對映面也就到了螢幕的中間。我是刻意這樣寫的,好處在於如果你是新接觸3d空間這個課題的話,想象物體在原點附近對你來說要容易一些。當然你可以嘗試不移動原點,取而代之移動物體,看看和原程式有什麼不同。

乙個簡單的particle sytem的例子

旋轉的星星球體,使用wasd鍵控制**角度

Flash如何實現3D應用

flash如何實現3d?我想很多人用flash這麼久了,都還不一定嘗試過,vision就是乙個3d的引擎,它能幫您實現,而且快open source囉。其實這概念來自用movieclips來達成3d的錯覺,藉由改變它的位置 尺寸,包含旋轉 扭曲等,您就可以感覺到3d的存在。不過最新的版本是以flas...

Flash中的3D投影

ps 第一次翻譯的,錯的請指出。這裡我簡單的對3d投影做了解釋,首先我們看看3d完美運用的 url 最基礎的3d投影公式是 scale fl fl z 這裡我理解scale為投影比例 fl是焦點距離 也就是眼睛到螢幕的距離 z是物體在螢幕裡的深度 看看下面的剖面圖 img files beyondp...

3D程式設計 Texture

include include include pragma comment lib,d3d9.lib pragma comment lib,d3dx9.lib pragma comment lib,winmm.lib define keydown vk code getasynckeystate ...