PV3D 2的安裝

Tutorial List

1. Preparing your tools
2. Getting the source
3. Creating a Papervision Base Template
4. Basic Template Usage
5. Basic Texturing
6. Loading Complex Models
7. Basic Mouse Interaction
8. Keyboard Interaction (To move the camera)
9. Basic Interactivity
10. Advanced Interactivity
11. Advanced Interactivity 2
12. Animation using Tweener

安裝使用

1. 到 http://code.google.com/p/papervision3d/ 找最新版本
   或者直接下載：Papervision3D_2.0_beta_1_src.zip
2. 解壓縮到預設的class path裡，或者放在自設的資料夾，在Flash中的【編輯Edit】-【偏好設定Preferences】中(或按ctrl+u)，到 ActionScript 標籤中新增該資料夾路徑至class path列表中。
3. 資料夾結構是對應到 import 的層級，如:
   import org.papervision3d.scenes.Scene3D
   指的就是：
   {class path資料夾}/org/papervision3d/scenes.Scene3D.as
   所以有興趣的話，可以研究其原始程式碼，或者懶得查文件時，也可以開啟來看有什麼功用。
4. 然後就快樂地使用吧～一開始什麼功能要import哪些檔難免不清楚，就多看各種教學與應用範例，建議按照papervision2.com裡的作法建立PaperBase.as

上面的範例中是參考http://papervision2.com/所做，用濾鏡直接處理render後的2D圖，而在點擊乳牛和螢幕時，會有不同的變化順序，似乎是按到collada物件也會再引發一次MOUSE_DOWN事件，但是為何如此還要再研究…

PV3D 2.0: How to do simple realtime shadows

PV3D 2.0: How to do simple realtime shadows

Dec 6th, 2007

Some people have mailed asking about how the shadows were done and where was the function in the API to create them.

Well, first of all PV3D 2.0 doesn't do the shadows automatically, but the new features let you do it (an many more other things). As soon as I knew that with the new version you were able to render the same scene in different sprites I though "shadows!". So, went quickly to give it a try and it worked perfectly. The idea is basically to do 2 renders per frame (this may be slow if you apply it at the end of a project). First render from the top of the scene, apply that render to the white plane at the bottom, and then second render from the user's camera.

This is the view from the "light camera" that gets rendered into a 512x256 bitmapViewport:



Next thing I wanted was to make the shadow a less dark, so, having already the bitmap, I just need to apply a colorTransform to it and make it a bit more pale.



And finally, apply a BlurFilter to the bitmap so the shadows is a bit diffuse



And that's all, this is the result:



Just as a last note... for the ball example I had to change before rendering the shadow the texture of the ball to black, and then change it back to the backed AO material.

Next thing on this matter will be to try to implement stencil shadows (because at the moment the shadow only works if the light is on the top, or one side...)

Oh! I almost forgot, here is the source file (requires flex2SDK, PV3D 2.0 and Tweener).

Papervision3D 教學系列

官網
http://www.papervision3d.org/
http://blog.papervision3d.org/
http://wiki.papervision3d.org/
http://www.nabble.com/Papervision3D-f22855.html
http://osflash.org/mailman/listinfo/Pap ... sflash.org

===========================================

若是有朋友也不知道該如何下載PV3D整包類別庫的話
請參考官方的說明：
http://wiki.papervision3d.org/index.php ... d_from_SVN

透過SVN抓取最新的檔案
建議的SVN工具是：TortoiseSVN
http://tortoisesvn.tigris.org/

透過SVN工具，可以自PV3D的以下位置抓取檔案：
http://svn1.cvsdude.com/osflash/papervision3d

在777(07年07月07日)這天，PV3D開始公開測試，改放在Google Code
http://papervision3d.googlecode.com/svn/trunk

===========================================

PaperPreview -- Collada預覽工具
http://benbenstudio.blogspot.com/2007/0 ... ion3d.html

Papervision3D components
http://benbenstudio.blogspot.com/2007/0 ... nents.html

一些Flash 3D的demo，不見得是使用Papervision3D
http://benbenstudio.blogspot.com/2007/0 ... 3d_03.html

===========================================

一些作者，因為不同因素，為PV3D開發了不同版本的分支

ASCollada，將collada格式的資料包成物件，未來希望不只給PV3D用，還可以給Away3D或Sandy其他引擎使用
http://www.suite75.net/blog/dev/introcu ... llada.html

===========================================

初探
http://benbenstudio.blogspot.com/2007/0 ... ion3d.html

空照
http://benbenstudio.blogspot.com/2007/0 ... art-2.html

加上滑鼠互動
http://benbenstudio.blogspot.com/2007/0 ... rt-22.html

拿外部圖檔當做貼圖材質
http://benbenstudio.blogspot.com/2007/0 ... rt-23.html

建模
http://benbenstudio.blogspot.com/2007/0 ... art-3.html

子母視窗
http://benbenstudio.blogspot.com/2007/0 ... rt-32.html

Camera.hover() --快速建置產品demo互動效果
http://benbenstudio.blogspot.com/2007/0 ... hover.html

Camera跟隨物體：PaperVision3D.org網站首頁海底世界的程式原理
http://benbenstudio.blogspot.com/2007/0 ... -pv3d.html

第一人稱視角的camera
http://benbenstudio.blogspot.com/2007/0 ... amera.html

從MovieScene3D找到每個DisplayObject3D的Sprite
http://benbenstudio.blogspot.com/2007/0 ... ene3d.html

魔術方塊與數獨遊戲的建模
http://benbenstudio.blogspot.com/2007/0 ... art-5.html

賽車遊戲
http://benbenstudio.blogspot.com/2007/0 ... art-6.html

不支援依照當下視角做旋轉
http://benbenstudio.blogspot.com/2007/0 ... rt-52.html

黑白棋的模型
http://benbenstudio.blogspot.com/2007/0 ... art-7.html

黑白棋遊戲
http://benbenstudio.blogspot.com/2007/0 ... rt-72.html

遙遠的背景
http://benbenstudio.blogspot.com/2007/0 ... art-8.html

Blender輸出Collada格式的模型
http://benbenstudio.blogspot.com/2007/0 ... llada.html

SketchUp輸出Collada模型
http://benbenstudio.blogspot.com/2007/0 ... llada.html

WireframeMaterial貼圖
http://benbenstudio.blogspot.com/2007/0 ... erial.html

碰撞偵測
http://benbenstudio.blogspot.com/2007/0 ... ion3d.html

3D旋轉相簿
http://benbenstudio.blogspot.com/2007/0 ... 3d-3d.html

繪製線段
http://benbenstudio.blogspot.com/2007/0 ... 3d_16.html

多頁立方體
http://benbenstudio.blogspot.com/2007/0 ... ion3d.html

===========================================

Blender
http://www.blender.org/

Python
http://python.org/

Papervision (Collada export issue from Blender)
http://nwebb.co.uk/blog/?p=21

自己改Blend吃的Python版本
http://projects.blender.org/tracker/ind ... 9&atid=231


引言回覆:
If your blender is running on WinXP, you should set a environment
variable "PYTHONPATH" to "c:\python24\lib",
and also set the "path to python" option in blender
to "c:\python24\lib".

Papervision3D入門第6步

建模過程略，如果有人需要我可以做個簡單視頻。

達達不會用3Ds MAX，所以這篇教程選擇的是Google SketchUp Pro 6，它是我見過最容易上手的3D建模工具了。。。我剛使用，就能建出我在3Ds MAX建不出來的模型，所以挺喜歡它的 。

雖然不是用3Ds MAX，但是最後導出的模型都是Collada文件，所以不用擔心你用的建模工具和我的不一樣，有興趣就繼續往下吧。

直接進入主題，使用Collada模型文件，和我們前面的基本教程中教的內容沒有多大差別，唯一不同的地方就是顯示對象換成了Collada類型，並且需 要根據Collada的模型文件中的材質貼圖設置，相應的在AS3代碼中進行貼圖。這一步也是初使用Collada模型的朋友，最容易失敗的地方，這個地 方處理好了，就沒什麼難度了

這裡我只寫出代碼有變化的地方，完整代碼請參考以前的教程。首先，需要引用Collada類，並將3D模型文件作為內嵌資源，嵌入到程序中：

1 2 3 4 5 6 7 8 9 10 11 12

//... import org.papervision3d.objects.Collada; //... [SWF(width='400',height='400',backgroundColor='0xFFFFFF',frameRate='30')] public class Main extends Sprite { //... [Embed(source='Demo.dae', mimeType='application/octet-stream')] private static var DemoModel:Class; //... }

主意Embed標籤的source和mimeType值，source是模型文件的相對路徑，mimeType一定不要搞錯了。

接著，我們需要在初始化3D場景的時候把模型一起初始化：

1 2 3 4 5 6 7 8 9 10 11 12 13

//... private function Init3D():void { var _materialList:Object = { Sketchy_Stone_Ashlar: new BitmapFileMaterial("demo2/Sketchy_Stone_Ashlar.jpg") }; _displayObj = new Collada(XML(new DemoModel()), new MaterialsList(_materialList)); _displayObj.x = 30; _displayObj.y = -60; } //...

注意上面的_materialList中的Sketchy_Stone_Ashlar屬性，這個屬性一定要和Collada的模型文件中的材質貼圖名稱一樣！否則什麼也顯示不出來，比如我的模型中的材質貼圖信息如下：

1 2 3 4 5 6 7 8 9 10 11

> id="Sketchy_Stone_AshlarID" name="Sketchy_Stone_Ashlar"> url="#Sketchy_Stone_Ashlar-effect"/> > id="BackColorID" name="BackColor"> url="#BackColor-effect"/> > id="ForegroundColorID" name="ForegroundColor"> url="#ForegroundColor-effect"/> > >

Sketchy_Stone_Ashlar對應的就是上面的name=」Sketchy_Stone_Ashlar」，我這裡沒有相應的設置 BackColor和ForegroundColor，因為這兩個是SketchUp自動生成的，因為這兩個材質貼圖不影響我的模型的顯示。

如果你是用3Ds MAX你可以在設置材質貼圖的時候設置這個名稱，記得這個名稱要符合命名規範，3Ds MAX自動給你生成的通常是不符合命名規範的，用起來會有些問題。

其它的代碼就和顯示一個球體模型或者立方體模型一樣了，大家參考以前的代碼吧。

如果你和我一樣使用SketchUp的話，那請你再繼續往下看…

按我上面的步驟做，顯示SketchUp導出的3D模型時是會出錯的，運行時會報「無法訪問空對象引用的屬性或方法。」。需要對PV3D的代碼做一處小修 改，來避免這個空引用異常。打開PV3D的Collada類的源文件，找到379行處的var len:Number = semVertices.length;，將它改為var len:Number = semVertices == null ? 0 : semVertices.length; 這樣就可以了

顯示效果如下：

PV3D對SkechUp導出的Collada模型似乎支持得不好，或者是SketchUp的Collada模型導出功能還不夠完善，所以顯示出來的效果和建模時的效果有些差別。

完整項目文件：try08_sketchmodeling.rar

Papervision3D入門第5步

今天入門第5步就講「3D交互」吧

PV3D中提供了一組專門負責3D交互的類，這些類都是以Interactive為開頭，其中有 InteractiveSprite，InteractiveScene3D，InteractiveSceneManager，InteractiveWireframeMaterial 等等。要實現3D交互功能我們就需要用到這些類。

我們這一講的代碼是基於《入門第3步》當中的Cube代碼修改的，所以如果你可能需要參考《入門第3步》的代碼。

首選，我們需要把3D場景的容器對象，改成InteractiveSprite類型：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

//... import org.papervision3d.utils.InteractiveSprite; //... [SWF(width='200',height='200',backgroundColor='0xFFFFFF',frameRate='30')] public class Main extends Sprite { //... private function Init3D():void { //... // 創建3D舞台的容器 _container = new InteractiveSprite(); //原先的代碼：new Sprite(); //... } //... }

接著我們要把3D舞台改成支持交互操作的InteractiveScene3D類型：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

//... import org.papervision3d.scenes.InteractiveScene3D; //... [SWF(width='200',height='200',backgroundColor='0xFFFFFF',frameRate='30')] public class Main extends Sprite { //... private var _scene:InteractiveScene3D; //原先的代碼：:MovieScene3D; private function Init3D():void { //... // 創建3D舞台 _scene = new InteractiveScene3D(_container); //原先的代碼：new MovieScene3D(_container); //... } //... }

比起普通的PV3D動畫程序，PV3D的3D交互程序多了一個InteractiveSceneManager對象，它負責所有的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

//... import org.papervision3d.utils.InteractiveSceneManager; //... [SWF(width='200',height='200',backgroundColor='0xFFFFFF',frameRate='30')] public class Main extends Sprite { //... private var _interactiveSceneManager:InteractiveSceneManager; private function Init3D():void { //... _interactiveSceneManager = _scene.interactiveSceneManager; _interactiveSceneManager.faceLevelMode = true; //註冊3D鼠標事件 _interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, OnObj3DMouseOver); _interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, OnObj3DMouseOut); //... } private function OnObj3DMouseOver(event:InteractiveScene3DEvent):void{ event.face3d.material = this._material2; //換材質，突出顯示被選中的face } private function OnObj3DMouseOut(event:InteractiveScene3DEvent):void{ event.face3d.material = this._material1; //換回原來材質 } //... }

你可以看到上面的代碼將InteractiveSceneManager對象的faceLevelMode設置成true。這裡需要說明下，PV3D給 InteractiveSceneManager設計了兩種狀態，一種是對象(object)級別的交互，一種是面(face)級別的交互，對象級別的交 互就是只精確到某個對象，比如一個Cube或者一個Plane，而面級別的交互可以精確到PV3D顯示的最小單位face3D，面級別的交互更精確，但是 執行效率比對象級別低很多，所以大家設計交互時需要考慮到這點。

另外代碼中用到的貼圖需要換成支持交互事件的InteractiveWireframeMaterial類型，為了突出顯示，我還另外用了一個InteractiveColorMaterial類型的紅色貼圖。關於材質貼圖的代碼修改：

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

import org.papervision3d.materials.InteractiveWireframeMaterial; import org.papervision3d.materials.InteractiveColorMaterial; [SWF(width='200',height='200',backgroundColor='0xFFFFFF',frameRate='30')] public class Main extends Sprite { //... private var _material1:InteractiveWireframeMaterial; private var _material2:InteractiveColorMaterial; private function Init3D():void { //... _material1 = new InteractiveWireframeMaterial(0x000000); _material2 = new InteractiveColorMaterial(0xFF0000); materialList.addMaterial(_material1, "top"); materialList.addMaterial(_material1, "bottom"); materialList.addMaterial(_material1, "front"); materialList.addMaterial(_material1, "back"); materialList.addMaterial(_material1, "left"); materialList.addMaterial(_material1, "right"); //... } //... }

整個程序的運行效果如下（請把鼠標放上去試試）：

這個例子中只實現了face的選擇，並沒有做到Colorfulee問我的選擇Cube某個面的效果，不過通過在鼠標事件中比對材質的id，我們是可以知 道Cube的哪個面被選擇的，不過需要為每個面都示例化一個材質貼圖，不能像示例代碼中那樣幾個面都共享同一個貼圖實例。有興趣的朋友可以自己試試看 。我不希望看我Blog的朋友都變成懶得動手的大懶蟲噢。

今天的學習就到這裡，我想光通過看我的《PV3D入門》是沒辦法完全掌握PV3D的，因為我每一講只能選重點的，或者朋友問得比較多的講，有很多特性我是 沒辦法介紹到的，所以建議大家出來看我的《PV3D入門》外，還可以通過PV3D的幫助文檔，Wiki，或閱讀PV3D源代碼來更深入的瞭解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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

package { import flash.display.Sprite; import flash.events.Event; import org.papervision3d.cameras.Camera3D; import org.papervision3d.scenes.MovieScene3D; import org.papervision3d.materials.MaterialsList; import org.papervision3d.materials.WireframeMaterial; import org.papervision3d.core.proto.MaterialObject3D; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.objects.Cube; //--New-- import org.papervision3d.utils.InteractiveSprite; import org.papervision3d.scenes.InteractiveScene3D; import org.papervision3d.utils.InteractiveSceneManager; import org.papervision3d.events.InteractiveScene3DEvent; import org.papervision3d.materials.InteractiveWireframeMaterial; import org.papervision3d.materials.InteractiveColorMaterial; [SWF(width='200',height='200',backgroundColor='0xFFFFFF',frameRate='30')] public class Main extends Sprite { private var _container :Sprite; private var _scene:InteractiveScene3D; // :MovieScene3D; private var _camera :Camera3D; private var _displayObj:DisplayObject3D; private var _material1:InteractiveWireframeMaterial; private var _material2:InteractiveColorMaterial; private var _interactiveSceneManager:InteractiveSceneManager; public function Main() { Init3D(); } private function Init3D():void { // 創建3D舞台的容器 _container = new InteractiveSprite(); //new Sprite; _container.x = 100; _container.y = 100; addChild( _container ); // 創建3D舞台 _scene = new InteractiveScene3D(_container); // new MovieScene3D( _container ); //--New-- _interactiveSceneManager = _scene.interactiveSceneManager; _interactiveSceneManager.faceLevelMode = true; _interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, OnObj3DMouseOver); _interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, OnObj3DMouseOut); // 創建攝像頭 _camera = new Camera3D(); _camera.z = -500; _camera.zoom = 5; var materialList:MaterialsList = new MaterialsList(); _material1 = new InteractiveWireframeMaterial(0x000000); _material2 = new InteractiveColorMaterial(0xFF0000); materialList.addMaterial(_material1, "top"); materialList.addMaterial(_material1, "bottom"); materialList.addMaterial(_material1, "front"); materialList.addMaterial(_material1, "back"); materialList.addMaterial(_material1, "left"); materialList.addMaterial(_material1, "right"); _displayObj = new Cube(materialList, 128, 128, 128, 2, 2, 2); _scene.addChild(_displayObj); this.addEventListener(Event.ENTER_FRAME, OnEnterFrame); } private function OnEnterFrame(event:Event):void { _displayObj.rotationX += 5; _displayObj.rotationY += 5; _scene.renderCamera(_camera); } private function OnObj3DMouseOver(event:InteractiveScene3DEvent):void{ event.face3d.material = this._material2; } private function OnObj3DMouseOut(event:InteractiveScene3DEvent):void{ event.face3d.material = this._material1; } } }

• Date Wednesday, 19 Sep 07 at 11:53 pm
• Under Papervision3D教程, Papervision3D, ActionScript
• You can follow any responses to this entry through the RSS 2.0 feed .
• You can leave a response , or trackback from your own site .

Papervision3D入門第4步

本來打算《入門第4部》講些關於貼圖的內容，但PV3D的內置對象貼圖太容易了，並且我們前兩篇文章的程序中都有涉及到了，所以今天除了講解材質的使用外，還打算做一下複習，回顧下基本的PV3D程序結構。

我發現大部分做Flash的朋友不是像我一樣從ActionScript3時代開始的，而是從Flash的動畫製作時代開始的，這些前輩都已經習慣了以時 間軸來思考程序中的變化過程，而PV3D的程序則普遍是以幀位單位來控制內容的變化，再加上AS3相對AS2也變化比較大，所以對於傳統AS2程序員和 Flash動畫製作人員，單純給一個範例代碼，還是有些不夠的。

在講材質貼圖直接，我們就先回顧下一個基本的PV3D程序結構。

首先，我們會有一個類，不管在Flash 9 CS3中還是Flex Builder的ActionScript項目中，都會有一個類做為整個Flash程序的入口。在Flash 9 CS3中，可以在底部的Flash屬性欄裡找到主類的設置選項。

我喜歡把我的主類命名為Main，其實命名位什麼都無所謂的，只要記得保持文件名和類名一致就可以 。不過記得主類一定要繼承自Sprite類。

1 2 3 4 5 6 7 8 9 10 11

package { import flash.display.Sprite; public class Main extends Sprite { public function Main() { } } }

上面就是我們的主類的代碼了，Main()函數是Main類的構造函數，就是說當你執行new Main();時，Flash虛擬機會調用這個函數，初始化Main類的對象(類的實例叫對象，達達是人這個類的一個實例，所以是個對象….)。所 以，Main()函數就是我們整個Flash的入口了（如果你的類叫做AA，那你的入口就是AA()請不要和C語言的Main函數混淆），這裡面的程序最 先被執行，所以我們可以在這裡面放一些初始化PV3D的代碼。下面我們就一步步初始化PV3D。

首先，PV3D的3D舞台需要一個容器，用來容納整個3D舞台。這個容器至少是Sprite類型的，因為Sprite是AS3或者說Flash9里，顯示對象的最小單位，這也是我們的主類一定要繼承自Sprite的原因，因為它需要被顯示。

我們現在定義一個容器變量_container，初始化它並把它加到主類的顯示列表裡。我習慣實例變量用小寫開頭，前面加下劃線

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

package { import flash.display.Sprite; public class Main extends Sprite { private var _container :Sprite; public function Main() { // 創建3D舞台的容器 _container = new Sprite(); _container.x = 100; _container.y = 100; //將它顯示出來 addChild( _container ); } } }

我們有了容器，現在需要一個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

package { import flash.display.Sprite; import org.papervision3d.scenes.MovieScene3D; public class Main extends Sprite { private var _container :Sprite; private var _scene :MovieScene3D; public function Main() { // 創建3D舞台的容器 _container = new Sprite(); _container.x = 100; _container.y = 100; //將它顯示出來 addChild( _container ); // 創建3D舞台 _scene = new MovieScene3D( _container ); } } }

然後我們需要在舞台上放一個攝像頭，他代表我們的眼睛，他能看到的就是你看到的。

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

package { import flash.display.Sprite; import org.papervision3d.scenes.MovieScene3D; import org.papervision3d.cameras.Camera3D; public class Main extends Sprite { private var _container :Sprite; private var _scene :MovieScene3D; private var _camera :Camera3D; public function Main() { // 創建3D舞台的容器 _container = new Sprite(); _container.x = 100; _container.y = 100; //將它顯示出來 addChild( _container ); // 創建3D舞台 _scene = new MovieScene3D( _container ); // 創建攝像頭 _camera = new Camera3D(); _camera.z = -500; _camera.zoom = 5; //把攝像頭看到的顯示出來 _scene.renderCamera(_camera); } } }

現在我們需要有一個3D對象，把它顯示出來我們才算成功 。PV3D的所有3D對象都是繼承自displayObject3D，就像Flash裡的Sprite一樣它是最小單位。如果學過面向對象編程，你就會知道父類型的變量可以引用子類型的對象。比如MovieClip是Sprite的子類，那底下的代碼是成立的：

1	var temp:Sprite = new MovieClip();

考慮到我們程序的通用性，我們的顯示對象使用displayObject3D類型，後面初始化時候你可以把它初始化成任意displayObject3D的子類型對象。

光一個3D顯示對象還是不夠的，它需要有個「皮」，你才能看到它….所以，我們同時需要一個材質貼圖（至少需要一個，如果是立方體，就需要六個面的貼圖）。PV3D中所有材質貼圖的基類是MaterialObject3D，所以考慮到通用性…..我就不多說了。

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

package { import flash.display.Sprite; import org.papervision3d.scenes.MovieScene3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.core.proto.MaterialObject3D; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.materials.WireframeMaterial; import org.papervision3d.objects.Sphere; public class Main extends Sprite { private var _container :Sprite; private var _scene :MovieScene3D; private var _camera :Camera3D; private var _material:MaterialObject3D; private var _displayObj:DisplayObject3D; public function Main() { // 創建3D舞台的容器 _container = new Sprite(); _container.x = 100; _container.y = 100; //將它顯示出來 addChild( _container ); // 創建3D舞台 _scene = new MovieScene3D( _container ); // 創建攝像頭 _camera = new Camera3D(); _camera.z = -500; _camera.zoom = 5; //黑色的線框材質 _material = new WireframeMaterial(0x000000); //弄個球玩玩 _displayObj = new Sphere(_material, 80, 10, 10); //把顯示對象添加到舞台 _scene.addChild(_displayObj); //把攝像頭看到的顯示出來 _scene.renderCamera(_camera); } } }

把程序運行起來，你可以放在Flex Builder的ActionScript項目中運行，也可以在Flash裡把影片的主類設置成我們現在寫的代碼，不要說你不會Flex Builder就做不了PV3D，這和Flex一點關係都沒有的。

運行起來你應該會看到一個像這的球：

現在我們要讓球動起來。記得我之前說的嗎？PV3D主要是以幀為單位來控制變化，所以我們需要一個方法可以控制到每一幀。AS3中我們只要註冊一個 Event.ENTER_FRAME事件的監聽程序就可以監聽到每一幀開始的時刻。然後，我們可以在我們的監聽函數裡，做我們需要做的，比如計算，或著讓 顯示對象移動旋轉等。

而PV3D要求每次舞台發生變化時都要顯式的調用舞台對象的renderCamera，重新繪製，否則內容始終是不重繪的。

下面是我們的新代碼，注意加了一句調用addEventListener的代碼，和一個OnEnterFrame函數。

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 58 59 60 61 62 63

package { import flash.display.Sprite; import org.papervision3d.scenes.MovieScene3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.core.proto.MaterialObject3D; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.materials.WireframeMaterial; import org.papervision3d.objects.Sphere; import flash.events.Event; public class Main extends Sprite { private var _container :Sprite; private var _scene :MovieScene3D; private var _camera :Camera3D; private var _material:MaterialObject3D; private var _displayObj:DisplayObject3D; public function Main() { // 創建3D舞台的容器 _container = new Sprite(); _container.x = 100; _container.y = 100; //將它顯示出來 addChild( _container ); // 創建3D舞台 _scene = new MovieScene3D( _container ); // 創建攝像頭 _camera = new Camera3D(); _camera.z = -500; _camera.zoom = 5; //黑色的線框材質 _material = new WireframeMaterial(0x000000); //弄個球玩玩 _displayObj = new Sphere(_material, 80, 10, 10); //把顯示對象添加到舞台 _scene.addChild(_displayObj); //把攝像頭看到的顯示出來 _scene.renderCamera(_camera); this.addEventListener(Event.ENTER_FRAME, OnEnterFrame); } private function OnEnterFrame(event:Event):void{ //以Y軸為軸旋轉 _displayObj.rotationY += 5; _scene.renderCamera(_camera); } } }

現在你就能看到球轉啊轉的樣子：

花了很大篇幅重新複習了一遍PV3D程序的基礎結構….現在可以開始講講基本的材質貼圖了。其實我們上面的程序就已用到了線框材質貼圖。除了線框材質 外，PV3D還支持顏色材質，位圖材質等，所有這些材質貼圖的類都在org.papervision3d.materials包裡。

我們給上面的程序換上一個黃色的材質貼圖看看會是什麼樣。只要把new WireframeMaterial(0×000000);改成new ColorMaterial(0xFFFF00);然後記得import org.papervision3d.materials.ColorMaterial;就OK了。

你的效果應該會和我的一樣：

再試試位圖文件材質，把new ColorMaterial(0xFFFF00);改成new BitmapFileMaterial(」texture.jpg」);這裡的」texture.jpg」是我的貼圖文件路徑，你需要根據你的需要設置， 記得這個路徑是url格式，不是文件系統路徑。

貼圖效果：

其他的貼圖我就不多說了，大家可以自己實驗看看。

Papervision3d入門的幾個資源

視頻介紹papervision（英文）：
Video Demo: Papervision3D CS3 Component 1.5 new features
http://www.rockonflash.com/blog/?p=61

flash演示幾個例子（英文）：
Papervision3D Preview!
http://www.rockonflash.com/blog/?p=29

整理papervision3d的相關資源的帖子：
Flash 3D：Papervision3D 教學系列
http://www.mmug.com.tw/forum/viewtopic.php?t=11200&postdays=0&postorder=asc&start=0&sid=ae6fd2894caf90b8dfc815d34d9d08ee

明晰介紹Papervision的用法（FlashCS3環境，英文）：
Papervision3D in 5 minutes
http://www.peterelst.com/blog/2007/07/07/papervision3d-in-5-minutes/

介紹Papervision的入門（Flex環境，中文）
Papervision3D 入門 [1] 配置開發環境
http://www.wapdaily.com/blog/article.asp?id=393
Papervision3D 入門 [2] 第一個Papervision3D應用
http://blog.80s.net.cn/article.asp?id=394

介紹Papervision的入門（Flex環境，中文）
第一次使用Papervision3D
http://www.unbe.cn/blog/?p=195
介紹Papervision的入門（Flex環境，英文）
Papervision3D tutorial from the ground up
http://rozengain.com/?postid=28

幾個Open Source Flash 項目

1) open flash chart http://teethgrinder.co.uk/open-flash-chart/
用flash 實現多種圖表的組件, 並提供了php .net 等調用代碼.

2) Flow Player http://flowplayer.org/

一個成熟的視頻flv 播放組件

3) APE http://www.cove.org/ape/

一個flash 2D物理引擎,基於AS3

4) Box2D flash http://box2dflash.sourceforge.net/

另外一個flash AS3 物理引擎, 據說api 比較複雜， 不適合初學者。

http://wiki.papervision3d.org/
O'Reilly Papervision3D Article + Potential Pv3d Book
http://pv3d.org/
http://papervision2.com/
http://papervision.ocelyn.com/
http://kallesaas.com/blog/

Papervision3D入門第3步

這一篇，我們將一起學習使用幾個基本的PV3D內置模型，PV3D的內置模型有平面，球體，立方體，柱狀體，等等。這些模型都是些最基本的形狀，可 能對於開發比較複雜的3D應用沒有幫助，但是學習使用它們可以幫助我們深入學習PV3D，在我們做後續試驗的時候可以有實驗對象

我們從球體開始。創建球體對象的代碼如下：

1 2 3 4 5

// 創建一個線框材質 _material = new WireframeMaterial(0x000000); //直徑80, 高度和寬度的精度為10 _displayObj = new Sphere(_material, 80, 10, 10);

直徑就很好理解了，精度決定了球的顯示效果，大家可以用不同精度試試看

顯示效果：

完整的代碼：

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 58 59 60 61 62

package { import flash.display.Sprite; import flash.events.Event; import org.papervision3d.cameras.Camera3D; import org.papervision3d.scenes.MovieScene3D; import org.papervision3d.materials.MaterialsList; import org.papervision3d.materials.WireframeMaterial; import org.papervision3d.core.proto.MaterialObject3D; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.objects.Sphere; [SWF(width='200',height='200',backgroundColor='0xFFFFFF',frameRate='30')] public class Main extends Sprite { private var _container :Sprite; private var _scene :MovieScene3D; private var _camera :Camera3D; private var _material:MaterialObject3D; private var _displayObj:DisplayObject3D; public function Main() { Init3D(); } private function Init3D():void { // 創建3D舞台的容器 _container = new Sprite; _container.x = 100; _container.y = 100; addChild( _container ); // 創建3D舞台 _scene = new MovieScene3D( _container ); // 創建攝像頭 _camera = new Camera3D(); _camera.z = -500; _camera.zoom = 5; // 創建一個線框材質 _material = new WireframeMaterial(0x000000); _displayObj = new Sphere(_material, 80, 10, 10); _scene.addChild(_displayObj); this.addEventListener(Event.ENTER_FRAME, OnEnterFrame); } private function OnEnterFrame(event:Event):void { _displayObj.rotationX += 5; _displayObj.rotationY += 5; _scene.renderCamera(_camera); } } }

後面的代碼我就不重複了，變化的部分都是_material = new WireframeMaterial(0×000000); 和 _scene.addChild(_displayObj); 兩個語句之間的3D顯示對象初始化代碼，大家應該明白怎麼改。後面我只寫內置模型類的用法。

創建立方體比創建平面對象和球體複雜些，需要給立方體對象一個材質列表，告訴它每個面用什麼材質。代碼如下：

1 2 3 4 5 6 7 8 9 10 11

var materialList:MaterialsList = new MaterialsList(); //六個面的材質 materialList.addMaterial(new WireframeMaterial(0xFF0000), "top"); materialList.addMaterial(new WireframeMaterial(0xFFFF00), "bottom"); materialList.addMaterial(new WireframeMaterial(0x0000FF), "front"); materialList.addMaterial(new WireframeMaterial(0x00FF00), "back"); materialList.addMaterial(new WireframeMaterial(0x000000), "left"); materialList.addMaterial(new WireframeMaterial(0xCC00CC), "right"); _displayObj = new Cube(materialList, 128, 128, 128, 2, 2, 2);

顯示效果：

大家可以試著把Cube的構造函數參數做些調整，看看顯示出來是什麼樣的。

柱狀體的初始化代碼：

1 2 3

//直徑40, 高度100， 顯示精度10，上底面直徑40 _displayObj = new Cylinder(_material, 40, 100, 10, 10, 40);

上面代碼顯示出來是一個圓柱體，如果你把上底面直徑設置成1，就變成一個錐形體了

顯示效果(左:上下底面直徑40，右:上底面直徑1)：

呵呵，這一篇的內容好像太過簡單了。。。。幾個後面試驗可能會用到的內置對象就這樣演示完了。大家可以自己調調構造函數的參數，看看不同效果。

Papervision3D入門第2步

大家有按《入門第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物理