【Away3D初级教程】用Away3D 4和Stage 3D创建的3D游戏和应用程序

驰骋的风 3D打印店铺

    随着版本的Flash Player 11中，其中包括硬件加速的Stage3D API，3D游戏，应用程序和联机的3D体验很可能在未来几年显着增加。Stage3D的API是非常强大的，但它带有一个相当陡峭的学习曲线。幸运的是，你可以用它来简化在Flash例如非常流行的开源3D引擎Away3D的3D开发的框架。Away3D中已经出现了自2007年以来，支持Flash Player 9和10以及最新的Flash Player 11中。它是自由的，开放源码的软件开发的flash 3d专业的全球团队，是用来开发游戏，应用程序，互动艺术，工具和3D内容或多或少什么。在本系列文章中，你会采取不同的任务，需要建立一个典型的3D项目，如加载资产，创造材料，和动画3D对象之旅。该系列的第一篇文章中介绍了如何设置Away3D中的4个项目，并创建一个简单的3D产品的观众在短短的30分钟内，用不到60行的代码。设置项目之前，你就可以开始使用Away3D的，你需要设置为Flash Player 11开发环境和确保，在Away3D库已经下载了最新版本。准备Flash Builder的Stage3D的发展
介绍了在Flash Player 11的Stage3D。在写作的时候，Flash Builder中不支持Flash Player 11的开箱即用。要获得新的API和编译为Flash 11，你需要完成几个步骤：1。首先，下载并安装Flash Player 11。如果你开发了显着的Flash项目，这是有道理的内容调试器版本的播放器，而不是使用。2。接下来，下载最新的稳定版本的Flex SDK。在写作的时候，这是Flex SDK 4.5的代号为英雄。一定要添加新的SDK安装Flex软件开发工具包在Flash Builder首选项的列表（见图1）。
图1。添加Flex SDK 4.5在Flash Builder中安装的软件开发工具包的列表。
Flex SDK包含一个名为的playerglobal.swc，其中包含所有的本地播放器API。为了确保您使用的是正确的SWC文件，支持Flash Player 11中的API，下载最新的playerglobal.swc文件。
本教程的目的，你可以从所提供的样本文件导入Flash Builder项目。在Flash Builder中，从“文件”菜单中选择“导入”>“Flash Builder项目。检查“项目文件夹”单选按钮，然后浏览到示例文件夹中包含src和HTML模板文件夹。单击“完成”（见图2）。图2。选择“导入”> Flash Builder项目，以导入示例项目。
注：从示例文件的zip压缩包，其中包含一个README.txt文件，src和HTML模板文件夹以及一个空的away4文件夹的根文件夹中导入示例项目。打开项目属性，导入的项目。在ActionScript编译器的部分，一定要选择最新版本的Flex SDK。在附加的编译器参数“对话框中，添加SWF文件版本= 13。此设置可确保您编译SWF格式的正确版本。单击Apply（应用）“（见图3）。图3。确保了Flex SDK 4.5和目标SWF版本设置为13。
导航到ActionScript构建路径“部分，单击”库路径“选项卡。展开的Flex SDK，如果已经存在，则删除的playerglobal.swc。点击Add SWC按钮来添加你刚才下载的，而不是最新版本的playerglobal.swc。展开“选项，然后进行一定的链路类型设置为外部。您可以配置通过双击行，在“链接类型：”。使这些更改后，单击“确定”以关闭Project Properties对话框（见图4）。

图4。新增的Flash Player 11的playerglobal.swc文件的库路径和配置外部链接库。
在Package Explorer中，导航到HTML模板文件夹，选择index.template.html，并单击鼠标右键，弹出的上下文菜单。>“文本编辑器”中选择“打开”。确保wmode参数设置为：直接。此设置是必需的Stage3D API来。第48行后添加新行，然后键入下面的代码行：
params.wmode =“直接”;
虽然这些说明可能看起来有点乏味，建立一个三维的项目，请记住，你只需要完成前三个步骤一次。当一个新的更新发布为Flash Builder甚至接下来的三个步骤可以省略。获得在Away3D库设置Flash Builder的工作与Flash Player 11后，下一步需要下载Away3D的开发库，并将它添加到您的项目。Away3D是一组类（百文件或一对夫妇的），你自己写的类。所以基本上，安装Away3D的开发团队，你可以下载源文件，并把它们作为自己的源代码在同一个文件夹（或类似）。Away3D是分布在一对夫妇的形状和形式。最好的办法，以确保您有最新的版本是从那里参观Github上的页面和下载的源。查看Away3D的库列表中选择一个Away3D的核心FP11。
浏览Away3D的核心-FP11库页。
如果你是熟悉的Git版本控制系统，你可能想克隆库，以确保它始终是最新的。但是，如果你不是一个Git用户，只需点击大下载按钮在右上角，作为一个ZIP文件，下载整个源代码树。
资料库解压缩ZIP文件。打开压缩的文件，找到一个src文件夹，其中包含了Away3D的源代码。将src文件夹内的某处Flash Builder项目，例如，在一个子文件夹称为“away4”。为了您的方便，一个空文件夹，这个名字已经被创建示例项目中（参见图5）。图5。创建一个文件夹，名为away4来自Away3D资料库的副本放置在src文件夹，它里面。
在“项目属性”面板中，选择“ActionScript构建路径选择和路径添加到这个src文件夹作为源路径（参见图6）。图6。在Away3D src文件夹添加到项目中的源路径。
在这一点上，你可以编译GettingStartedWithAway3D.as的应用程序，而不会造成任何错误，虽然现在的应用程序不真正做任何事情，当你运行它。
如果您希望与SWC文件，寻找最新版本的Away3D的网站上，或，在Away3D源放置在一个Flash Builder Flex库项目建立你自己的。创建一个简单的3D产品浏览器现在，你已经把所有的都设置了，你准备好做一些实际的编程。在本节中，您将创建一个简单的3D产品查看器（一个在线商店或产品展示）使用不到60行代码。 建立视图和渲染
当建立一个新的3D应用程序或模块的操作顺序，第一个是创建和配置来看，核心组件，它作为3D世界的窗口，通过它被认为是一种。您也可以想到的显示3D输出屏幕或帆布的观点。在最简单的情况下，你可以创建一个实例View3D，并把它添加到显示列表。然而，对于这个示例项目中，您也将开启反锯齿和配置的视图的背景颜色。添加以下五个行的构造函数：_view = new View3D();
_view.backgroundColor = 0x666666;
_view.antiAlias = 4;
this.addChild(_view);
this.addEventListener(Event.ENTER_FRAME, onEnterFrame); 构造函数应该是这个样子的：public function GettingStartedWithAway3D()
{
_view = new View3D();
_view.backgroundColor = 0x666666;
_view.antiAlias = 4;   
this.addChild(_view);
this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}确保正确地从flash.events.Event事件类是进口的。当你开启反锯齿设置它的值，2，4，或16，您所指定的硬件渲染器将每个像素使用多个子样本中所有的边缘变得平滑。一般设置4提供可接受的结果。虽然构成作为显示对象，该对象可以被添加到显示列表，View3D真正使用Stage3D的API，这意味着3D内容显示列表后面绘制。因此，定期的背景色设置将不会适用于Away3D 4内容。您将使用backgroundColor属性来定义背景色。接下来，请确保在每一帧渲染的观点，所以，现场的任何变化重绘。在前面的代码示例中包括ENTER_FRAME侦听器，所以你必须添加适当的侦听器函数，就像这样：private function onEnterFrame(ev : Event) : void
{
_view.render();
}此功能可确保视图的渲染（）方法被调用，使每帧的观点是重绘。这是基本的锅炉板代码用于大多数3D项目的。现在，您可以运行的代码，但应用程序只显示一个灰色的矩形。其实你看到的是空视图的平面背景的颜色，这证实了该视图正确显示。载入模型在Away3D 4加载外部资产的过程是非常简单，用途广泛。在即将到来的教程中，我将描述这个系统的更多细节。在最简单的情况下，所有你需要做的加载3D模型来创建一个实例的Loader3D类，将其添加到现场，并开始加载过程。这个过程模仿的方式，你可以使用常规的使用flash.display.Loader类加载2D艺术品。然而，这是一个好主意，在适当的事件监听，并添加装载机现场，只有在你的负载是成功的。
添加以下五个行代码的构造函数。当您输入此代码，确保你还引进away3d.loaders.parsers.Parsers的，away3d.events.LoaderEvent类和flash.net.URLRequest类，如果他们不已经包含在Flash Builder项目。Parsers.enableAllBundled();

_loader = new Loader3D();
_loader.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
_loader.addEventListener(LoaderEvent.LOAD_ERROR, onLoadError);
_loader.load( new URLRequest('vase.awd') );
构造函数应该是这个样子的：public function GettingStartedWithAway3D()
{
_view = new View3D();
_view.backgroundColor = 0x666666;
_view.antiAlias = 4;

this.addChild(_view);
this.addEventListener(Event.ENTER_FRAME, onEnterFrame);

Parsers.enableAllBundled();

_loader = new Loader3D();
_loader.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
_loader.addEventListener(LoaderEvent.LOAD_ERROR, onLoadError);
_loader.load( new URLRequest('vase.awd') );
}上面的第一行，使所有捆绑的解析器。这是最简单的策略，因为你不必关心文件格式，但可能会增加不必要的重量，你的SWF文件。称为解析器负责存储格式（如OBJ 3D模型或JPEG图像）转换成一种格式，该发动机在运行时可以使用的一组类。Away3D中使用一个插件架构解析器，它允许你只包括那些你的项目的需要，或编写自己的。此外，您启用的解析器将被用于为自动检测文件格式，这意味着您的应用程序不必事先知道该资产被加载的文件格式。这是本机Loader类作品相似，似乎是显而易见的，但很多搜索引擎（包括早期版本的Away3D中）使用不同的文件格式略有不同的加载过程。接下来的四行以上创建一个Loader3D的实例，说明成功和失败的添加事件侦听器，并启动的资源vase.awd的加载。下面的函数是如何错误处理程序，可以看看一个例子。这七条线路添加到您的类：private function onLoadError(ev : LoaderEvent) : void
{
trace('Could not find', ev.url);
_loader.removeEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
_loader.removeEventListener(LoaderEvent.LOAD_ERROR, onLoadError);
_loader = null;
}上面的代码使用的跟踪方法，以显示在输出窗口中的错误消息和处置的装载机。为了让垃圾收集器从内存中删除加载器，你将需要删除的事件***。同样，这是如何成功处理程序应如下：private function onResourceComplete(ev : LoaderEvent) : void
{
_loader.removeEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
_loader.removeEventListener(LoaderEvent.LOAD_ERROR, onLoadError);
_view.scene.addChild(_loader);
}由于负载操作是成功的，这个功能增加了装载机到现场，，可接通过View3D实例。Loader3D例如作为一个容器加载的资源中找到的所有的视觉资产。添加到场景的过程是指容器的内容呈现视图时，将是可见的。现在运行的代码。你应该看到一个纹理花瓶的矩形的中心（见图7）。
图7。静止画面加载的的花瓶运行在Away3D。
希望你享受一个花瓶的静止画面，但在实时三维植根于电源与3D内容互动的可能性。毕竟，有更简单的方式来呈现的静止画面的花瓶。 作为一个非常简单的措施，下一个和最后一个步骤将需要添加一些基本的交互控制从哪个角度的花瓶被渲染的。这是两个步骤来完成：你会使用户能够回旋的花瓶绕Y轴水平移动鼠标，然后允许用户移动点查看了上下垂直移动鼠标。 有很多方法可以实现这样的两轴旋转，但可以说是最简单的方法是绕Y轴旋转Loader3D实例，并绕X轴旋转的摄像头。首先，添加以下代码行onEnterFrame（）方法，之前的render（）的调用：
_loader.rotationY = stage.mouseX - stage.stageWidth/2;onEnterFrame（）方法现在看起来应该是这样的：private function onEnterFrame(ev : Event) : void
{
_loader.rotationY = stage.mouseX - stage.stageWidth/2;
_view.render();
}此代码Y轴旋转的Loader3D实例绑定到用户的光标相对于舞台的中心位置。如果您运行的代码，在这一点上，你可以移动你的鼠标平移的花瓶，看着它从四面八方。接下来，添加下面两行，再前调用render（）方法，以控制摄像头的位置在Y轴：_view.camera.y = 3 * (stage.mouseY - stage.stageHeight/2);
_view.camera.lookAt(_loader.position);onEnterFrame（）方法现在看起来应该是这样的：private function onEnterFrame(ev : Event) : void
{
_loader.rotationY = stage.mouseX - stage.stageWidth/2;
_view.camera.y = 3 * (stage.mouseY - stage.stageHeight/2);
_view.camera.lookAt(_loader.position);
_view.render();
}此代码将相机向上和向下，你垂直移动光标。确保在适当位置的变化是足够大的数量3。LOOKAT（）功能将重新定位摄像机，使其继续直视的花瓶，即使它向上和向下移动。在这个例子中，它实现了这一目标，它围绕其X轴旋转点头向上和向下。 在这个基本教程中，您学习了如何用最省的精力创建一个简单的3D产品使用Away3D的观众。此处提供的说明通常不管您开发的3D项目的类型，所以你现在已经准备好跟随假定的Away3D的基本知识，如剩余在本系列教程的示例项目。

驰骋的风 3D打印店铺

  【Away3D初级教程】总目