大家有按《入門第1步》中的方法獲取了源代碼嗎?我們今天要開始上手練習了。
《入門第2步》會教大家吧Papervision3D用起來,不過還不能看到讓人興奮的3D效果,但要看到美麗的3D效果,就要打好基礎,你很快就會在《入門第3步》看到自己的第一個3D Flash程序了(或者第一個可以看到效果的PV3D程序?)
這一篇文章我是以Flex Builder為例,所以大家請先確認有裝了Flex Builder2或者3。
我們開始了。先把你的Flex Builder準備好,我們得找一個乾淨的「工作空間」,才不會讓以前的項目干擾我們的視線 。點選「File」->「Switch Workspace」,如圖:
這時會彈出一個窗口提示我們瀏覽工作空間所在路徑,你可以把工作空間指定到你喜歡的路徑上,我的建議。
如果之前你有建過Flex項目的話,那這時候會發現這些項目從導航窗口消失了,不用擔心,它們不會沒掉,只要你再Switch Wordspace到原來路徑他們就又會出現了
第二步我們新建一個ActionScript項目,是純ActionScript項目噢,不要建成別的了,你可以參考下面的截圖:
然後輸入項目名等信息,因為我用的是Flex Builder3所以底下有一個選擇SDK的選項,不過一般不用去管他。
你可以按照項目名做「主類」的名稱,也可以自己命名,我把它命名為Main。
變成了:
接下來需要用到我們上次通過SVN獲取到的Papervision3D源代碼了,卻確的說是AS3版本的。先找到你上次導出PV3D源代碼的路徑,你將會看到圖上這樣的目錄結構:
把這些文件夾全部選中,然後拖拽到剛剛新建的PV3D試驗項目中,鼠標會有一個加號出現,然後放開鼠標,PV3D的所有文件就會複製一份到我們的項目目錄下了 像這樣:
現在我們開始要在Main.as添加使用PV3D的代碼了。你可以把下面這段代碼複製一份到你的主類文件裡,再把類名改成你自己的。也可以先看一遍理解下,再自己模仿寫一遍。因為代碼很簡短,我就不依依做解釋了,看看註釋你應該就能明白。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | package { import flash.display.Sprite; import org.papervision3d.cameras.Camera3D; import org.papervision3d.objects.Plane; import org.papervision3d.scenes.MovieScene3D; import org.papervision3d.materials.WireframeMaterial; [SWF(width='400',height='400',backgroundColor='0xFFFFFF',frameRate='30')] public class Main extends Sprite { private var _container :Sprite; private var _scene :MovieScene3D; private var _camera :Camera3D; private var _plane:Plane; public function Main() { // 創建3D舞台的容器 _container = new Sprite; _container.x = 200; _container.y = 200; addChild( _container ); // 創建3D舞台 _scene = new MovieScene3D( _container ); // 創建攝像頭 _camera = new Camera3D(); _camera.z = -500; _camera.zoom = 5; // 創建一個線條材質 var material:WireframeMaterial = new WireframeMaterial(0x000000); // 創建一個 128 * 128 的平面 _plane = new Plane( material, 128, 128, 2, 2); // 將平面對象加入到舞台 _scene.addChild( _plane ); // 繪製3D舞台 _scene.renderCamera( _camera ); } } } |
上面代碼如果運行正常你應該可以看到如下效果:
不管多複雜的PV3D程序,流程都和這個小程序一樣,創建容器,創建舞台,創建攝像頭,創建3D對象,然後顯示。所以牢記這幾個步驟是很重要的
接下來我們再加些代碼讓我們的3D對象可以動起來。
以下是修改後的代碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | package { import flash.display.Sprite; import org.papervision3d.cameras.Camera3D; import org.papervision3d.objects.Plane; import org.papervision3d.scenes.MovieScene3D; import org.papervision3d.materials.WireframeMaterial; import flash.events.Event; [SWF(width='400',height='400',backgroundColor='0xFFFFFF',frameRate='30')] public class Main extends Sprite { private var _container :Sprite; private var _scene :MovieScene3D; private var _camera :Camera3D; private var _plane:Plane; public function Main() { // 創建3D舞台的容器 _container = new Sprite; _container.x = 200; _container.y = 200; addChild( _container ); // 創建3D舞台 _scene = new MovieScene3D( _container ); // 創建攝像頭 _camera = new Camera3D(); _camera.z = -500; _camera.zoom = 5; // 創建一個線條材質 var material:WireframeMaterial = new WireframeMaterial(0x000000); // 創建一個 128 * 128 的平面 _plane = new Plane( material, 128, 128, 2, 2); // 將平面對象加入到舞台 _scene.addChild( _plane ); // 繪製3D舞台 _scene.renderCamera( _camera ); this.addEventListener(Event.ENTER_FRAME, OnEnterFrame); } private function OnEnterFrame(event:Event):void{ _plane.rotationX += 5; _plane.rotationY += 5; _scene.renderCamera(_camera); } } } |
運行效果:
我們在原有代碼的基礎上加了ENTER_FRAME事件的監聽,讓我們的平面對象再每一幀都旋轉一點,再重新繪製3D舞台,你可以修改rotationX和Y的值,或者加上rotationZ的變化,看看效果。
所有的動畫型PV3D程序也都是這種結構,先初始化基礎的3D對象,然後註冊ENTER_FRAME事件監聽程序,在每一幀對顯示內容做調整,然後重新繪製。
假設你的幀速設置為40,就是每秒Flash會調用ENTER_FRAME監聽函數40次。這樣就得限制你的ENTER_FRAME監聽函數每次執行消耗的時間在1/40秒內,如果超過這個限制,你的程序可能就會看起來一卡一卡的了。
你現在已經懂得PV3D程序的基礎結構了,後面的教程我們會開始一起熟悉PV3D的內置對象和一些概念,再後面如果我們可以走的再深入些,我們可能就會一起學習些3D物理