--- 博客已遷移至: http://www.sealyu.com/blog
在網頁里制作三維實時動畫和網頁三維游戲,從很多年前的shockwave時代(那種普及率很難稱作一個時代)就開始了。如今網頁三維引擎雖不算多如牛 毛,也算多到眼花的。具體為什么這項技術到現在還沒有普及起來,在下可能又能寫一篇文章了,所以這里就不多講。先提一下這些的原因是想讓我們不要覺得 flash3d是很超前,或者很高難度不可攀的東西。 在下從shockwave時代就對網頁三維引擎頗有興趣,現在對flash3d也有少許了解。在下也知道國內flash3d站,中文高端資料也是非常有限的,國內的研發者就更是屈指可數。 我們Flab3D.com就是為了讓更多國內flash3d愛好者了解,上手,并希望能加入flash3d制作和開發的行列。因此我們的教程更注意對基本原理的講解,并非簡單描述如何操作。 如果你的夢想和我們一樣是建造在網頁上的三維世界,那么請和我們一起加油。
我們都會以flash中的使用為初級教程的軟件,flex暫不多提,flex的使用者解決這類簡單的安裝問題應該是不成問題的)
原理解釋: 要使papervision3D成像,必須至少初始化下面4個東西(如果沒有三維引擎經驗,或者三維動畫制作經驗,如果無法理解請先記下來,別擔心,以后用多了慢慢就懂了):
窗口:用戶觀看的窗口,簡單的可以想成就是flash里面的畫布大小。窗口也可以理解成渲染的尺寸,否則畫面就無限大了 場景:場景是指整個三維的場景。 攝像機:很多人要問,為什么有了攝像機還要窗口呢?攝像機是用來拍畫面的,看畫面還是得電視機/窗口不是嗎,^_^ 渲染器:如果沒有這個東西,所有以上的東西都只是數據,渲染器就是把所有數據變成圖像的東西。
下面這幅圖雖然并不算準確的表述,但希望能幫助我們理解: 圖1
當然只有上面的東西,我們雖然有了個正確的基本pv3d設置。但還是什么都看不到,因為場景里什么都沒有嘛,呵呵。
我們這個例子里,會向場景加入一個小球,然后給這個小球貼上一個自己做的位圖貼圖。(如果沒有三維經驗的朋友,可以把小球想成是一個木頭架子組成的燈籠框,貼圖是上面糊的畫紙=___=有時候我有沒有必要解釋到這種地步OTL…),最后讓這個小球自己慢慢轉動。
請下載我們為您提供的 pv3d傻瓜包 (08-10)。 另外自己看了下面的流程仍然有困難寫出代碼的朋友可以下載我們的 源文件 ,解壓放到和pv3d的com,org幾個包放在一起就可以了。
新手操作流程:
新建一個主包(就是一個文件包),把pv3d解壓后的所有包放到這個包里面,我們就可以開始工作了。
打開flash CS3(或cs4)新建一個fla文件,以“test01.fla”為文件名保存在主包里,和剛才解壓的pv3d的包在同一個包中。 下面屬性框中: 禎數調到30fps; 窗口大小用400*400; 文件類:test01 (另外語言如果默認不是actionscript3需要改成actionscript3)
新建一個ActionScript文件,以保“test01.as”為文件名保存,里面寫: Package{ public class test01 extends Sprite { public function test01():void { } } } 知道as3的都知道,這個是基本的類結構吧。所有成品的pv3d程序,都需要繼承于Sprite類。Test01里含有一個test01構造函數,程序自動會先找這個運行。
private var viewport:Viewport3D=new Viewport3D(400,400); //初始化窗口 private var scene:Scene3D =new Scene3D; //初始化場景 private var camera:FreeCamera3D =new FreeCamera3D; //初始化攝像機 private var renderer:BasicRenderEngine= new BasicRenderEngine; //初始化渲染器 以上就初始化好了4要素。
addChild(viewport)//記得把窗口加入的stage里,別忘了喲,所以要寫上這句。
renderer.renderScene(scene,camera,viewport); //這句就可以渲染一張圖勒。
但是我們肯定不想就渲染一張圖就完畢,我們想能動起來,所以需要能1秒鐘渲染30張左右。
addEventListener(Event.ENTER_FRAME,process); //所以加入一個enterframe private function process(evt:Event):void { renderer.renderScene(scene,camera,viewport); //把剛才那句渲染的句子放到enterframe這里面來,每秒渲染器就會盡最大努力刷新30次,我們的場景就會動起來了。 }
現在我們試著放一個球到場景里去。先在主包里面放一張任意的jpg圖片(隨便什么jpg圖都可以,大小最好修改成128*128,256*256,1024*1024這種),命名為‘map.jpg’。
private var sphere:Sphere= new Sphere(new BitmapFileMaterial('map.jpg'),400,12,12); //上面構造Sphere的4個參數分別代表:貼圖,半徑大小,橫行段數,豎行段數 // new BitmapFileMaterial('map.jpg')是直接構建一個位圖貼圖的快捷寫法。‘map.jpg’就是主包里面那張圖。如果你非要把圖放在其他包里,就寫‘其它什么什么包/map.jpg’。 scene.addChild(sphere);//這里看清楚喲~是場景在addChild.
為了讓我們的程序可以執行,我們必須在開始導入這些類。 import flash.display.Sprite; import flash.events.Event; import org.papervision3d.cameras.FreeCamera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.scenes.Scene3D; import org.papervision3d.view.Viewport3D; import org.papervision3d.materials.BitmapFileMaterial; import org.papervision3d.materials.utils.MaterialsList; import org.papervision3d.objects.primitives.Sphere;
這時我們運行程序,就能看到一個我們可愛的小球(沒有動的)了。
為了不至于錯覺圖像定住了(實際上沒有定住,只是場景里面沒有東西在動而已,渲染器仍然在以每秒30張圖的速度刷新著一個相同位置的小球而已。),所以我們在enterframe的方法里加入一句。 sphere.rotationY+=1; //延Y軸以順時針方向,小球每禎轉1。(我們下次會專門講到這方面的控制,別擔心。)
ctrl+enter,運行發動!
興奮吧,去泡杯茶小小的慶祝一下吧~站起來跳兩下也可,身邊有伙伴也可擁抱(別太久=_=)。 有空記得自己把玩一下里面的參數,多熟悉一下哦,加油! 有任何不清楚的地方,歡迎到討論區發言。(無需注冊)
DDM君 Flab3D.com
Flash3d研究所推薦的Pv3d傻瓜包下載 源文件下載
Powered by: BlogJava Copyright © seal