在大多數3d軟體中,3d基本元素是構成3d世界的基石。away3d自帶有17種3d基本元素以及一些別的幫助物。本教程將解釋如何用這些3d基本元素實現非常酷的效果,比如**波形條、cmyk顏色分離等等。本教程同時會介紹away3d支援的兩種**書寫方式。
首先,不要小看這些3d基本元素。它們可能很簡單,但它們非常有用!舉個例子,乙個簡單的球(sphere)就可以勝任建立乙個全景圖的工作。當然你也可以用skybox這個3d基本元素來做乙個立方體的全景圖。
在前兩節關於3d基本元素的教程裡,我們重點放在那些常用的3d基本元素上。在第三節關於3d基本元素的最後一節,我們會介紹非常規的3d基本元素,比如海龜。你說的是海龜?耶,在別的3d引擎裡還有奶牛呢,away3d裡有海龜這一3d基本元素。
先決條件
本教程建立在我們
別的教程基礎
之上。假如你是flash3d菜鳥,你可能會先要去看看這些教程。舉個例子,有些原始檔,點選附帶的as檔案檢視它們是如何工作的。所有這些例子都要用到乙個
cover.as
檔案。這個檔案是讓教程裡用到的flash影片不能同時工作,否則會拖垮你的電腦。如果你不確定如何使用這些例子,檢視這個教程。
教程裡的一部分例子會用到「紋理」。關於紋理與材質我們會在後邊教程詳細介紹,如果要讓**在flash cs3裡工作,
讀這個教程
.the ********(三角形)
三角形是3d模型的基石。雖然單個三角形用處不大,但多個三角形組合在一塊就可以生成任何模型。更幸運的是away3d允許從3d軟體匯入複雜的模型,這樣就不用我們用一塊塊三角形去拼湊出複雜模型。三角形還有別的用途。三角形是3d基本元素中最小單元,它常用於象粒子效果那樣的資源密集物。
建立三角形你就要在3d空間裡設定a\b\c三點。每點都是頂點(由x/y/z定位的點),如下:
1.var tri:******** = new ********();tri.a = new vertex(0,200,0);
2.tri.b = new vertex(100,0,0);tri.c = new vertex(-100,0,0);tri.bothsides = true;
3.view.scene.addchild(tri);
下面是完整的三角形例子:
movie:
as:basic08_********.as
注意,我們把三角形的"bothsides"屬性設為true.假如不這樣做,我們只能看到三角形的一面。
the plane(平面)
平面是乙個沒有厚度的矩形。預設情況下,平面有兩個三角形組成。但是你可以據需要增加三角形數量。平面是第二輕量級3d基本元素。但它卻是完成一些任務的不二之選。當你建立「電視牆」時,用機個「平面」並將電影材質放於其上就可以了。平面在3d場景裡做襯托地面也非常有用。
看這個例子
前面提到,away3d支援兩種**書寫方式。你建立乙個物件時,你可以把屬性值傳給建構函式,也可以在建立物件後設定屬性。讓我們看看這兩種可能的方式。
第一種方法可以在類建構函式裡傳遞該類所有的引數。下面**建立乙個黑線白框平面。
1.var myplane:plane = new plane();
2.view.scene.addchild(myplane);
這種書寫方式非常簡潔。可以很容易指定所要的線框顏色。當然你還可以分開宣告每個屬性:
1.var mat:wirecolormaterial = new wirecolormaterial();mat.color = 0xff0000;
2.mat.wirecolor = 0x000000;var myplane:plane = new plane();myplane.material = mat;
3.myplane.rotationx = -90;view.scene.addchild(myplane);
這種方式要繁瑣點,但許多開發者為了**的可讀性寧願使用者種方式。使用何種方式完全由你決定。許多開發者對**書寫方式有強烈的個人偏好,為了討好所有人away3d對兩種方式都支援。
你可能注意到,在這個例子裡我們將平面沿x軸轉了90度,這是因為平面沒有厚度,只有轉動讓平面朝向我們才能看到它。
你可以通過設定segment引數調整平面的複雜度:
1.myplane.segmentsw = 4;myplane.segmentsh = 6;
這句可以增加平面裡的三角形密度,這對補償因三角形過少而產生的失真。點選按鈕體驗這個問題:
as:textures.as
下面讓我們來看看使用平面的更有代表性的**。下面你看到一套由adobe 公司的john nack 設計的cs3圖示,點選、拖動,可以看到顏色分離。然後對齊外框讓再次重合。
as:basic08_plane.as
分離的四張透明png格式,模擬cmyk分離效果。這個是這樣實現的:讓hovercam3d繞五個平面轉動,c\m\y\k和乙個白色平面就像五張紙通過blendmode.multiply組合.
the cube(立方體)
立方體有高、寬、厚度。你可以為每個面設定不同的材質。
as:basic08_cube.as
同樣有兩種**書寫方式:
1.cube = new cube();
你也可以寫成更具可讀性:
1.var cube:cube = new cube();cube.width = 200;cube.height = 100;cube.depth = 300;
那種方式由你決定。使用cubematerials屬性設定六個面(top, bottom, left, right, front and back)的材質,就像下面**那樣:
1.cube.cubematerials.left = new colormaterial(0xffffff,);
每個3d物體都可以沿x/y/z軸進行一些移動、旋轉等操作,如下:
1.cube.x = 200;cube.rotationy = 45;
更詳細的關於3d物體的操作介紹看這個教程。現在我們將立方體用於專案中。下面是**波形顯示條的例子。波形條的高度、顏色和濾鏡都是根據波形變化發生變化。
movie:
as:basic08_cube_music.as
藍色的立方體描述右聲道而紅色立方體描述的是左聲道。每個聲道的波譜被平分成八份,每個立方體表現聲譜的一部分情況。每部分的最大值存在乙個陣列裡並設定漸變。每次檢測到新的最大值時,我們就應用模糊濾鏡並增加尺寸與顏色。檢視原始碼分析詳細情況。
away3d顯示Plane(基礎 二)
我們直接說新增的 下面定義了乙個away3d自帶的幾何體plane也就是乙個 板子 var plane planegeometry new planegeometry 100,100 定義乙個plane,也就是乙個平面物件 var color colormaterial new colormater...
Away3d學習筆記 1
為了做一些較複雜的3d應用,打算學習下3d引擎。pv3d早已停止更新,away3d看上去是個不錯的起點,一來因為它開源免費,而且 相關的資料比較豐富。通過比較,發現推薦較多的是這本 the essential guide to 3d in flash 第二章包括一些簡單的例子,通過敲打這些demo,...
編譯away3d例程式記
記不住是在哪一篇文章上看到flash player 11之後支援3d,並且是使用顯示卡來繪製,速度相當可觀,我身為 flex鐵桿粉絲 的程式設計師怎麼能不嘗試一下呢?立馬試之。2 建立乙個actionscript專案 我吃虧在這裡,建立的是flex專案,檢視了很多教程都沒有說清楚這個,唉 3 將目錄...