靜態長方體
那麼接著上一節所討論的內容,來製作乙個靜態的長方體,並且讓它在螢幕上來回的運動。這個例子和上一節的例子非常的相似,同樣主要關心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 ...