Away3D 4.0官网教程(翻译)

使用Away3D 4、Stage3D 创建3D游戏和应用程序 （此帖每天都会更新，一定让大家完全的搞明白）

补充区：
       'vase.awd' 可以使用 Prefab3D打开(在帖子后面回复后便可下载)
       http://www.closier.nl/prefab/ Prefab3D的官网

其他帖子索引（本帖为第一部的翻译）：
      第二部翻译: Flash3D基础知识(官方翻译)

第1部分:30分钟建立一个3D项目
     FlashPlayer11中可以硬件加速,3D游戏,应用程序和在线3D体验在未来几年很可能是个发展趋势
     Stage3D的API非常强大,但它相当难搞定，幸运的是,还有开放源码的3D引擎Away3D
     Away3D始于2007年,它支持Flash Player 9、10 以及最近的Flash Player11它是强大免费的开源软件 
     在这个文章中,根据不同的任务要求构建一些典型的3D项目,例如加载资源assets,创造材质和播放3D对象。

本文的第1部分介绍了 如何设置一个Away3D 4项目,并创建一个简单的3D产品查看器  仅仅30分钟,用不到60行代码。
设置项目
       在开始开发Away3D 4项目前,您需要安装FlashPlayer11和最新版本的Away3D library
       1、首先,下载和安装FlashPlayer11 debugger版本
       2、接下来,下载最新的Flex SDK 4.5,并添加到Flex IDE中
       3、Flex SDK包含一个文件playerglobal.swc,其中包含所有的本地播放器的api.下载最新的playerglobal.swc文件(如果你是现在的flex4.6那就没必要去下载playerglobal.swc了)
       4、导入本文的实例项目(在帖子最后可以下载)
      

2012-6-26 10:19:13 上传

下载附件 (48.24 KB)

5。在附加的编译器参数对话框中,添加-swf-version=13。这一参数确保你编译的SWF格式。

2012-6-26 10:24:59 上传

下载附件 (76.26 KB)

6、设置playerglobal.swc 这里不多说，我用的是flex4.6 如果其他版本的 就要把这个装上了。 

 

2012-6-26 10:28:10 上传

下载附件 (45.82 KB)

7、html-template的index.template.html文件编辑器打开，第48行加入
params.wmode = "direct";

加入Away3D library

下一步下载Away3D library 并将其添加到您的项目。Away3D是一组类,类似于你自己写的类。

所以本质上,你可以下载安装Away3D源文件,并把它们放在相同的文件夹中(或者类似的)作为自己的源代码。(请下载帖子后面的Away3D类库)
       1、下载Away3D类库 解压，里面有个src和pb。我们先在根目录下建个away4文件包，然后把那个src和pb复制进去。如图：
        

2012-6-26 13:25:20 上传

下载附件 (14.6 KB)

      2、设置  源路径
     

2012-6-26 11:20:10 上传

下载附件 (62.82 KB)

      这样项目就搭建好了。后面我们来看怎么写代码咯。呵呵
      创建一个简单的3D项目
      现在您把上面的步骤做完了，就可以开始做一些实际的编程。
      在这个小节中,您将创建一个简单的3D产品查看器(为一家在线商店做产品展示)用不到60行代码。

本帖隐藏的内容

设置视图和渲染

当构建一个新的3D应用程序,首先要做的操作是创建View,它作为一扇窗户,透过它能看到3D世界。(顶级容器)
      在最简单的情况下,您可以创建一个View3D的实例,并将它添加到显示列表。
       添加以下五行代码到构造函数:

1. _view = new View3D();
   
2. _view.backgroundColor = 0x666666; 
   
3. //设置视图的背景颜色
   
4. _view.antiAlias = 4;    //设置视图 抗锯齿的数量(设置的越高，平滑度越高，但是会影响性能)
   
5. this.addChild(_view);  //将视图添加到舞台上
   
6. this.addEventListener(Event.ENTER_FRAME, onEnterFrame);   //监听帧动画走动

复制代码

构造函数现在应该是这样了：

1. public function GettingStartedWithAway3D()
   
2. {
   
3.         _view = new View3D();
   
4.         _view.backgroundColor = 0x666666;
   
5.         _view.antiAlias = 4;                       
   
6.         this.addChild(_view);
   
7.         this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
   
8. }

复制代码

当启用了antiAlias设置它的值2,4,或16
      您指定硬件渲染器将通过使用一些边缘平滑,渲染每个像素。通常设置为4.

backgroundColor 可以定义View3D的背景色.

ENTER_FRAME监听器，监听动画的每一帧。
      前面的代码示例包含一个ENTER_FRAME侦听器,所以你必须添加适当的监听器函数,比如这个:

1. private function onEnterFrame(ev : Event) : void
   
2. {
   
3.         _view.render();
   
4. }

复制代码

这个函数 View3D的render()方法被调用到每一帧,这样可以在每一帧动画中去重绘view3D。

这就是基本的样板化代码用于大多数3D项目。您可以运行代码,可是现在的应用程序仅显示一个灰色的长方形。实际上,你看到的是空视图的背景颜色。

加载模型

Away3D 4加载外部资源的过程简单，并且极为万能。以后的教程中，我会对这一系统做更详细介绍。最简单的使用方法是，创建一个Loader3D类的实例，将其放进scene(场景)，启动加载即可。这个过程类似于你原先使用flash.display.Loader类加载2D资源的方式。不过，你最好侦听相关事件，并在将loader添加到场景之前，检测加载是否成功。
      向构造器添加下面5行。敲代码时，确保已经导入away3d.loaders.parsers.Parsers, away3d.events.LoaderEvent和flash.net.URLRequest。

1. Parsers.enableAllBundled();
   
2.        
   
3. _loader = new Loader3D();
   
4. _loader.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
   
5. _loader.addEventListener(LoaderEvent.LOAD_ERROR, onLoadError);
   
6. _loader.load( new URLRequest('vase.awd'));

复制代码

构造器应该像这样：

1. public function GettingStartedWithAway3D()
   
2. 
   
3. {
   
4. _view = new View3D();
   
5. 
   
6. _view.backgroundColor = 0x666666;
   
7. 
   
8. _view.antiAlias = 4;
   
9. 
   
10. this.addChild(_view);
    
11. this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
    
12. Parsers.enableAllBundled();
    
13. 
    
14. _loader = new Loader3D();
    
15. _loader.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
    
16. _loader.addEventListener(LoaderEvent.LOAD_ERROR, onLoadError);
    
17. 
    
18. _loader.load( new URLRequest('vase.awd') );
    
19. 
    
20. }

复制代码

第一行会激活所有绑定的解析器。这是最简单的方法，因为你不用担心文件格式，但可能给你的SWF文件增加不必要的体积。
      被指定为解析器的类负责将存储格式(像比OBJ 3D模型或JPEG图像)转化为引擎在运行时能够调用的格式。Away3D的解析器使用插件式的架构，也就允许你只嵌入项目需要的那部分，或者自己编写。并且，这些解析器能够自动侦测文件格式，这意味着你不必预知要加载的文件类型。这和flash原生的Loader类使用方法相似，看起来并无新奇之处，但要知道，许多3D引擎(包括Away3D的早期版本)在加载不同文件格式时，使用的加载方式不尽相同。
      上面代码接下来的4行，创建了一个Loader3D的实例，为预期的success和failure事件添加侦听，并且开始加载一个名为vase.awd的资源。

下面的函数演示了如何处理加载错误。向你的类添加下面7行：

1. private function onLoadError(ev : LoaderEvent) : void
   
2. 
   
3. {
   
4. 
   
5. trace('Could not find', ev.url);
   
6. _loader.removeEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
   
7. _loader.removeEventListener(LoaderEvent.LOAD_ERROR, onLoadError);
   
8. 
   
9. _loader = null;
   
10. 
    
11. }

复制代码

上面的代码使用trace语句将错误信息显示到输出面板并处理loader。为了是垃圾回收机制将loader从内存中清除，需要卸载所有的侦听。类似的，下面是success对应的处理函数：

1. private function onResourceComplete(ev : LoaderEvent) : void
   
2. 
   
3. {
   
4. 
   
5. _loader.removeEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
   
6. _loader.removeEventListener(LoaderEvent.LOAD_ERROR, onLoadError);
   
7. 
   
8. _view.scene.addChild(_loader);
   
9. }

复制代码

上面的代码操作是针对加载成功情形下的，函数将loader加入scene(场景)，我们可以通过View3D的实例获取对它的引用。Loader3D的实例相当于加载资源中所有可视元素的容器。将其加载到scene，也就意味着在渲染view时，容器中的内容就会显示出来。
       现在运行代码试一试。你将会看到view矩形的中央出现一个具备纹理的花瓶。

2012-6-26 14:19:44 上传

下载附件 (15.88 KB)

实例文件下载：Files.zip(1.32 MB, 下载次数: 483)

2012-6-26 10:20:23 上传

下载次数: 483
实例代码
下载积分: 银子 -1 两

Away3D类库下载：away3d-core-fp11_4_0_0_beta.zip(512.62 KB, 下载次数: 819)

2012-6-26 10:52:07 上传

下载次数: 819
away3D类库
下载积分: 银子 -1 两

Prefab3D下载:Prefab3D_2.0.zip(1.64 MB, 下载次数: 351)

2012-6-28 16:53:50 上传

下载次数: 351
下载积分: 银子 -1 两

需要一起学习的可以加入  9RIA天地会上海群②  48975063
       或者加本人QQ 一起学习一起讨论: 598571681

本帖是基于《Away3D 4.0官网教程(翻译)》的续讲：

介绍3D术语、并将解释如何才能把3D放入flash中。
讲解网格,质地或材质是什么
使用Flash 3D引擎 诸如Papervision3D、Away3D
本文最后有例子下载。
注意:示例文件是Away3D 3.6

在我们2D世界里，我们能够看到的就只有两个轴，X轴和Y轴。一个代表横向一个代表纵向。这样可以构成一个平面效果。
但是在我们的3D世界里两个轴是不够的，这里我们多出了个Z轴。表示深度。

看下面的滚动坐标的例子，更好让你理解这3个轴的意义。

1. package {
   
2.         import away3d.cameras.HoverCamera3D;
   
3.         import away3d.containers.View3D;
   
4.         import away3d.materials.ColorMaterial;
   
5.         import away3d.primitives.Sphere;
   
6.         import away3d.primitives.Trident;
   
7.        
   
8.         import flash.display.Sprite;
   
9.         import flash.display.StageAlign;
   
10.         import flash.display.StageScaleMode;
    
11.         import flash.events.Event;
    
12.         import flash.events.MouseEvent;
    
13.        
    
14.         [SWF(width="500", height="400", frameRate="30", backgroundColor="#FFFFFF")]
    
15.         public class Triaxe extends Sprite {
    
16.                
    
17.                 private var View:View3D;
    
18.                
    
19.                 // HoverCam controls
    
20.                 private var camera:HoverCamera3D;
    
21.                 private var lastMouseX:Number;
    
22.                 private var lastMouseY:Number;
    
23.                 private var lastPanAngle:Number;
    
24.                 private var lastTiltAngle:Number;
    
25.                 private var move:Boolean = false;
    
26.                
    
27.                 public function Triaxe()
    
28.                 {
    
29.                         // prep for handling resizing events
    
30.                         this.stage.scaleMode = StageScaleMode.NO_SCALE;
    
31.                         this.stage.align = StageAlign.TOP;
    
32.                        
    
33.                         // create a 3D-viewport
    
34.                         camera = new HoverCamera3D({zoom:2, focus:100, distance:250});
    
35.                         View = new View3D({camera:camera,x:250, y:200});
    
36.                        
    
37.                         // add viewport to the stage
    
38.                         addChild(View);
    
39.                         camera.panAngle = 45;
    
40.                         camera.tiltAngle = 20;
    
41.                         camera.minTiltAngle = -90;
    
42.                         camera.hover(true);
    
43.                        
    
44.                         // Add some reference objects
    
45.                         var mat:ColorMaterial = new ColorMaterial(0xffff00);
    
46.                         var sphere1:Sphere = new Sphere({radius:10, material:mat, x:100,y:-150});
    
47.                         View.scene.addChild(sphere1);
    
48.                        
    
49.                         mat = new ColorMaterial(0xff00ff);
    
50.                         var sphere2:Sphere = new Sphere({radius:10, material:mat, y:200,z:150});
    
51.                         View.scene.addChild(sphere2);
    
52.                        
    
53.                         mat = new ColorMaterial(0x00ffff);
    
54.                         var sphere3:Sphere = new Sphere({radius:10, material:mat, z:100,x:-150});
    
55.                         View.scene.addChild(sphere3);
    
56.                        
    
57.                         // Show the axis
    
58.                         var axis:Trident = new Trident(180);
    
59.                         View.scene.addChild(axis);
    
60.                        
    
61.                         addEventListener(Event.ENTER_FRAME, onEnterFrame);
    
62.                         this.stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
    
63.                         this.stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
    
64.                 }
    
65.                
    
66.                 private function MouseDown(event:MouseEvent):void
    
67.                 {
    
68.                         lastPanAngle = camera.panAngle;
    
69.                         lastTiltAngle = camera.tiltAngle;
    
70.                         lastMouseX = stage.mouseX;
    
71.                         lastMouseY = stage.mouseY;
    
72.                         move = true;
    
73.                 }
    
74.                
    
75.                 private function MouseUp(event:MouseEvent):void
    
76.                 {
    
77.                         move = false;
    
78.                 }
    
79.                
    
80.                 private function onEnterFrame(e:Event):void
    
81.                 {
    
82.                         // re-render viewport
    
83.                         var cameraSpeed:Number = 0.3; // Approximately same speed as mouse movement.
    
84.                         if (move) {
    
85.                                 camera.panAngle = cameraSpeed*(stage.mouseX - lastMouseX) + lastPanAngle;
    
86.                                 camera.tiltAngle = cameraSpeed*(stage.mouseY - lastMouseY) + lastTiltAngle;
    
87.                         }
    
88.                         camera.hover();
    
89.                         View.render();
    
90.                 }
    
91.         }
    
92. }

复制代码

注意：这里要导入away3D 3.6版本的源代码，详情看上一篇文章。

顶点（Vertices）
3D空间中有个顶点。一个顶点需要定义 xyz轴来确定这个点的位置。
就像一个2D点,当你绘制图形到flash中,图形的位置给X=0,Y=0,相对父级左上角的位置
3D世界中也有类似的点。（点是用于确定位置的 在3D中画一个三角形就需要 3个点来确定位置了）

三角形（Triangles）