Away3D 基础 2 - 视口与场景

原英文地址:

http://www.flashmagazine.com/Tutorials/detail/away3d_basics_the_view_and_the_scene/

   当您通过窗口向里看时,你所看到的不是房内的所有景物,你能看到的由窗口大小、形状所决定的。你所见的只是被窗“裁剪”掉的不全的小部分景物。这能够恰如其分地说明“视口view”的工作原理，它就是我们观察3d世界的“窗口”。

  不管你想要在Away3D做什么,有几件事你永远需要设置。本指南将解释Scene场景、View视口、Camera照相机、Primitives基本3D物体、Textures 纹理和探讨其他可能碰到的概念。本指南的一系列的例子其代码都是由as3脚本构成，所以这些例子同时可以在flash、flex里运行。

如果你是3D菜鸟,你可能想要看我们关于三维核心概念的介绍。指南中含有6 个Away3D项目实例。运行实例文件前,你首先需要在您的计算机上设置Away3D开发环境。当设置好Away3D开发环境后,你只要把这些实例下载到你的项目文件夹上就可以打开、探索和调试这些实例。这些例子都要用一个类文件Cover.as。请先下载该文件到您的项目目录保证所有能够运行实例。

  要呈现3d内容，首先要有View(视口) 、Scene(场景);本篇教程主要讲讲这二者。

 View(视口)

  视口，在away3d中的类名是View3D。新建一个视口类实例要用到以下代码：

   1. var view:View3D = new View3D();

  视口的默认值是无穷大的，即相当于“窗口”是无限大的，我们看到的将是外面的所有景物（flash电影的全部内容），即flash尺寸是视口的有效视域.传统电视的高宽比为4:3,现在的高清电视的高宽比为16:9,你也可以如此这般地去设置flash电影的高与宽来确定输出尺寸.

值得注意的是虽然away3d的View3D类继承自as3的sprite类,但是没有width与height属性.在flex里可能会提示你存在着这些属性(目前版本),但即使你尝试去设置该属性那也是无效的,视口的有效范围仍整个flash.不过你可以通过设置"clipping"属性轻松解决这一问题(稍后解释).

另外你还可以设置x/y属性对视口定位,但是对away3d新手来说这里有个非常容易搞混的地方,设置视口的x/y时不仅在舞台上移动视口的位置,同时还改变了视口里的坐标.为了尽可能避免出错，你应该总是将视口的x/y设置为高/宽的一半，这样可以确保内容显在中央。教程中的例子高宽是465*400的,所以我们创建View3D类实例时会对x/y参数进行如下设置：

1.var view:View3D = new View3D({x:232, y:200});

当然你也可以创建好视口类实例后再设置参数:

1.var view:View3D = new View3D();

2.view.x = 232;

3.view.y = 200;

正如本指南开篇讲的那样,创建视口的同时会自动生成默认的Scene(场景)与Camera(照相机).但你也可以象上边设置view的x/y属性的二种方式那样对默认的场景与照相机进行修改.

创建好视口,不等于视口就可以显示其中场景中的3D景物.我们还要用render()方法告诉计算机对视口进行渲染.

1.view.render(); 

一般你会逐帧或间隔时间调用这个命令.但要小心.假如你flash电影的帧频设的过快或间隔时间过短,这会拖慢你的电脑.这就要求我们设置一个最佳值.据一般经验,保持在25-30 fps间即可保证电脑速度又可基本达到完美渲染的目地.

设置"view.clipping"效果如同设置视口的高与宽一样(假如可以设置高宽属性的话)裁剪视口大小,让视口有效范围不再是整个flash电影.下面例子中有多个视口,这些视口里装的是同一场景只是观看角度不同. 

< width="500" height="400" type="application/x-shockwave-flash">

< type="text/javascript">

movie: Basic02.as Basic02_view.as

下载保存上面二个文件并跟着进行练习.我们先单独创建一个基本视口类，在主类里创建一个场景和4个Basic02_view类的实例。这4个类实例是用传递不同参数到4个视口构造函数的方式创建的.4个视口以不同的角度展示同一个场景，就好象一些三维软件里呈现的那样。

在这个例子里用到一个技巧，我们将每个视口都放进一个sprite里，用对这个sprite定位来保证视口的x/y属性设置无误即等于视口高宽的一半，注意在Basic02_view.as里的一个RectangleClipping是如何起效的。另一个非常有用的技巧就是将一复杂区域切分成几个视口,各个视各为所用,就象flash里层一样.

Scene(场景)

 场景就象是flash里的舞台,场景中的任何东西都可以展示出来。创建场景有二种方法。最简单的方法就是在创建view视口时away3D会自动创建一个场景。

1.var view:View3D = new View3D({x:232, y:200});

  上边代码在创建视口的同时创建了一个场景。这样你就可以通过"view.scene"访问场景了。当然你也可以手动创建场景然后把场景传递给视口：

1 var myScene:Scene3D = new Scene3D; 
2 var view:View3D = new View3D({x:232, y:200, scene:myScene});

上边代码就是我们用多个视口展现同一场景例子中的部分代码。在这里我们为场景指定了引用名为“myScene”，这比第一种方法里用view.scene引用场景更为直接。

一旦你在视口里“安放”好场景这个“舞台”，你就会迫不及待地想往这个“舞台”上添加些你想展示给大家的3D内容。Away3D里的3D内容必须放在场景或在场景中的3D容器中才行。3D容器里我们可以放置几个3D内容，这样我们就可以象操作单个3D物那样操作放在同一3D容器里的多个3D物。

我们先创建一个3D物，一个半径为50象素球:

1.var mySphere:Sphere = new Sphere({radius:50});

跟FLASH里一样我们可以在把“显示对象”放在显示列表中之前先把它创建出来。为了让这个“3D球”显示出来我们还要用addChild方法把它加入“舞台”，如果我们用的是默认场景，我们会这样做：

 1.view.scene.addChild(mySphere);

 假如我们要把球放到事先创建的场景里我们会这么做：

 1. myScene.addChild(mySphere);

 在away3d里场景与其它3D物一样，可以被移动、转动、缩放等。如果你想删除场景中的3D物，象flash里删除操作一样你可以这么做：

1. myScene.removeChild(mySphere);

同时你也可以侦听场景变化和鼠标动作.侦听与放弃侦听与flash里一样:

 1.myScene.addEventListener(Object3DEvent.SCENECHANGED,someFunction);

2.myScene.removeEventListener(Object3DEvent.SCENECHANGED,someFunction);

 这些就是所有你对场景所要了解的内容,尽管很简单.它就象是flash里的舞台stage.

准备好了么,下一节我们将学习:away3d里的照相机Camera