使用Away3D 4 和 Stage 3D创建3D游戏以及应用程序—第一部分：30分钟内建立一个3D项目

Flash Player 11包含硬件加速功能的Stage3D API，随着它的发布，3D游戏、应用程序以及联机3D体验的数量很有可能会在未来几年里急剧地增加。 Stage3D API 非常强大，但是它有着相当陡峭的学习曲线。 幸运的是，你可以使用框架来简化Flash中的3D开发过程—例如非常流行的开源3D引擎Away3D。

Away3D是2007年问世的，它支持Flash Player 9 和 10 以及最新的Flash Player 11。作为免费、开源的软件，它是由一个Flash 3D专业人员组成的全球性团队开发的，用于开发游戏、应用程序、互动技巧、工具以及或多或少与3D相关的内容。

在本系列文章中，你将看到建立一个典型的3D项目所需要的不同任务，例如加载组件、创建材料以及为3D对象动画效果。

本系列的第一篇文章描述了如何在30分钟内建立一个 Away3D 4 项目以及如何创建一个简单的3D产品阅读器，这仅使用了不超过60行代码。

要求

预备知识

建议具有利用ActionScript 3和 Flash Builder 或类似的集成开发环境（IDE）进行编程的基本经验。

其它附加要求的产品

• Flash Player 11（下载）
• Away3D 4.0 （下载）

范例文件

GettingStartedWithAway3D.zip

建立项目

在你能够开始使用Away3D 4之前，你需要设置 Flash Player 11开发环境并保证你已经下载了最新版本的Away3D库。

为 Stage3D 开发准备Flash Builder

Stage3D 是在 Flash Player 11 中引入的。在写这篇文章时，Flash Builder 尚不支持即开即用的 Flash Player 11。 为了能够访问新的 API 并编译 Flash 11，你将需要完成如下的一些步骤：

1. 首先，下载并安装Flash Player 11*。 如果你要开发大量的 Flash 项目，那么你需要使用内容调试版本的播放器。
2. 然后，下载最新的 Flex SDK* 稳定版本。 在写这篇文章时，Flex SDK 4.5 的代码名称是Hero。 在 Flash Builder Preferences 中，确保将新的 SDK 添加到 Installed Flex SDKs 的列表中（参见图1）。

图1.在Flash Builder中，将Flex SDK 4.5添加到已安装的 SDK的列表中。

3. Flex SDK 包含一个名称为 playerglobal.swc 的文件，它包含了所有的本地播放器 API。 为了确保你正在使用的是正确的可支持 Flash Player 11 API 的 SWC 文件，建议下载最新的playerglobal.swc 文件*.
4. 针对本教程，你可以从提供的范例文件中导入 Flash Builder 项目。 在 Flash Builder 中，从Flie菜单中选中 Import > Flash Builder Project。 选中"project folder"单选按钮，并浏览到包含 src 和 html-template 文件夹的 sample files 文件夹。 单击 Finish (参见图2)。

图2.选中 Import > Flash Builder Project以便于导入范例项目。

注意：你可以从范例文件 zip 存档的根文件夹导入范例项目，此文件夹还包括一个 README.txt 文件、src 和 html-template 文件夹以及一个空的 away4 文件夹。

5. 打开已导入项目的项目属性。 在 ActionScript 编译区，确保选中最新版本的 Flex SDK。 在 Additional compiler 参数对话框中，添加 -swf-version=13。这一设置确保你可以编译正确版本的 SWF 格式。 单击 Apply （参见图3）。

图3.确保选中Flex SDK 4.5以及SWF的目标版本设置为13 。

6. 导航到ActionScript Build Path部分并单击 Library path标签。 扩展Flex SDK并移除playerglobal.swc（如果存在的话）。 单击Add SWC按钮添加你刚下载的最新版本的playerglobal.swc。 扩展相应的选项并确保将 Link Type设置为 External。 你可以通过双击"Link Type:"行对它进行设置。 在完成这些变更之后，单击OK关闭 Project Properties对话框（参见图4）。

图4.将Flash Player 11 playerglobal.swc文件添加到库路径（library path）中并为库设置外部链接。

7. 在Package Explorer中，导航至html-template文件夹，选中index.template.html并右击调出上下文菜单（context menu）。 选中Open With > Text Editor。 确保wmode参数设置为：direct。 这个设置是Stage3D API运行所必需的。 在48行之后添加一新行并输入如下代码：

params.wmode = "direct";

虽然这些建立3D项目的指令似乎有一点冗长，但是记住你只需要一次性完成前三个步骤即可。在Flash Builder 发布新的更新补丁之后，甚至连后续的三个步骤都可省去。

获取AWAY3D库

在建立能够使用 Flash Player 11的 Flash Builder 之后，下一个步骤涉及下载Away3D库并将它添加到你的项目中。 Away3D 是一个类集（包含数百个文件），类似于你自己编写的类。 因此本质上来说，你可以下载源文件并作为你自己的源代码将它们放置到同一文件夹中（或者相似的文件夹），以便于安装 Away3D 。

Away3D 能够以各种形式发行。 确保你拥有最新版本的最好方法是访问 Github 页面*并从这里下载源代码。 查看一下 Away3D 库的列表并选中名称为 away3d-core-fp11 的选项。 

1. 浏览到 away3d-core-fp11 库页面* 。
2. 如果你熟悉Git Version Control System，那么你可能想要复制这个库以便于保证它总是最新的。 然而，如果你不是Git用户，那么只需要单击右上角显示的很大的Downloads按钮并以ZIP文件方式下载整个源代码树即可。
3. 解压ZIP库文件。 打开压缩的文件，找到包含Away3D 4 源代码的src文件夹。 将src folder放置在你的Flash Builder 项目中的某个位置，例如放在一个名为"away4"的子文件夹中。 为了方便，已经在范例项目中创建一个具有该名称的空文件夹（参见图5）。

图5.创建一个名为away4的文件夹并将来源于Away3D库的src 文件夹副本放置到away4文件夹中。

4. 在Project Properties面板中，选中ActionScript Build Path 选项并将路径作为源路径添加到src文件夹中（参见图6）。

图6.将Away3D src文件夹添加至项目源路径中 。

5. 至此，你可以编译 GettingStartedWithAway3D.as 程序而不会导致任何错误，尽管现在你运行应用程序时，它事实上不会做任何事。

如果你喜欢使用 SWC 文件，那么就去 Away3D 网站*上搜寻最新的版本，或者将 Away3D 源代码放置到某个 Flash Builder Flex Library 项目中以建立自己的版本。

创建一个简单的3D产品阅读器

在你已经设置好一切之后，你可以做一些实际的编程。 在本章节中，你可以使用少于60行的代码创建一个简单的3D产品阅读器（用于网店或者产品展示窗）。

设置视图和渲染

当建立一个新的3D应用程序或者模块时，第一道操作工序是创建和配置视图，作为核心组件，它充当着一类窗口，通过它可以看到相应的3D世界。 你也可以认为视图能够作为一个屏幕或者画布来显示3D产品的。

在最简单情形下，你可以创建一个 View3D 实例并添加到显示列表。 然而，对于本范例项目，你还需要启用锯齿消除功能（anti-aliasing）并配置视图的背景颜色。 在相应的构造器中添加如下5行代码：

 _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);
}

 

确保 Event 类能够正常地从flash.events.Event 导入。

当你通过设置锯齿消除功能（anti-aliasing）值为2、4或者16以启用它时，通过每像素使用一些子样本，你可以指定硬件渲染器消除所有边界的锯齿。 通常情况下，设置值为4就可提供能够接受的结果。

尽管 View3D 看起来像是可添加到显示列表的显示对象，但它实际上使用 Stage3D API，这意味着 3D 内容是在显示列表后台绘制的。 结果导致常规的背景颜色设置不能应用到 Away3D 4 内容。 你可以使用 backgroundColor 属性定义背景颜色。

接下来，确保每一帧都渲染视图，那样场景的任何变更都将重新绘制。 前面的代码范例包含一个 ENTER_FRAME 侦听器，所以你必须按照如下代码添加合适的侦听函数：

private function onEnterFrame(ev : Event) : void
{
	_view.render();
}

该函数能够确保每一帧均调用视图的 render() 方法，这样可以重新绘制视图。

这是大多数3D项目使用的基本样板代码（boiler-plate code ）。 现在你可以运行代码，但是应用程序只显示一个灰色的矩形。 你实际上看到的是空视图的单调背景颜色，这就确认了视图渲染是正常的。

加载一个模型

在 Away3D 4中加载外部组件的过程非常简单并且用途很广泛。 在即将问世的教程中，我将更加详细地描述这个系统。 在最简单情形下，加载一个3D模型所需要做的一切就是创建一个Loader3D 类的范例，然后将它添加到场景中并开始加载过程。 这个过程与你使用常规的flash.display.Loader 类加载2D作品的方式相似。 然而，你应该侦听合适的事件，并且只有在你确认加载成功后才将加载器添加到场景中。

在相应的构造器中添加如下5行代码： 在你输入代码时，如果在你的 Flash Builder 项目中不包含 away3d.loaders.parsers.Parsers、away3d.events.LoaderEvent和flash.net.URLRequest 类，那么确保你也需要导入它们。

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的早期版本）对不同文件格式使用的加载过程略有不同。

上述代码接下来的4行创建一个 Loader3D 实例，分别为表明成功和失败的事件添加侦听器，并且发起加载一个名为 vase.awd 的资源。

下面函数是一个错误处理程序格式的范例。 将下面7行代码添加到你的类中：

 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;
}

 

上述代码使用了相应的跟踪方法在 Output 窗口中显示错误信息并且丢弃相应的加载器。 为了使得回收站能够从内存中移除加载器，你也需要移除相应的事件侦听器。 相似地，下面是成功处理程序应该具有的格式：

 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 的魅力根植于3D内容的互动能力。 毕竟，还有更简单的方法渲染静止的花瓶图片。

作为一个非常简单的方法，下一步以及最后一步将涉及添加一些基本的互动功能以便于控制渲染花瓶的角度。 这需要两步来完成：你必须允许用户通过水平移动鼠标在围绕Y轴方向旋转花瓶，然后允许用户通过垂直移动鼠标来上下移动相应的视点（point-of-view）。

有很多方法可以完成像这样的旋转两个轴的操作，但是可以说最简单的方法是围绕Y轴方向旋转 Loader3D 实例，并围绕X轴方向旋转摄像机。 首先在 render() 调用前，将如下一行代码添加到 onEnterFrame() 方法中：

_loader.rotationY = stage.mouseX - stage.stageWidth/2;

现在，onEnterFrame() 方法应该如下所示：

 private function onEnterFrame(ev : Event) : void
{
	_loader.rotationY = stage.mouseX - stage.stageWidth/2;
	_view.render();
}

 

该代码将 Loader3D实例的Y轴旋转与相对于Stage中央的用户光标所在的位置绑定起来。 如果你现在运行代码，则你可以移动鼠标来扫视花瓶，以便从各个角度观察它。

接下来，再一次在调用 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 轴方向旋转以便于上下摆动来实现这个目标。

下一步阅读方向

在本基础教程中，你学习了如何使用 Away3D 4 毫不费力地创建一个简单的 3D 产品阅读器。不管你开发的 3D 项目类型是什么，在通常情况下，这里提供的指南都是必要的，所以现在你可以通过跟随应用 Away3D 基本知识的各种范例项目进行学习，例如，本系列教程中的其余教程。

如果你想继续在第三维度中畅游，请阅读本系列教程其它的部分（即将推出），它们将分别描述如何处理场景图形、加载和管理 3D 组件、材料和灯光以及动画等。

此外，请查看下列在线资源以便了解关于 Stage3D 的更多信息：

• 适用于Adobe Labs的Adobe Flash Player 和Adobe AIR 的Stage3D API*
• Stage3D的Adobe Flash平台博客*
• Molehill介绍：适用于Adobe Flash Player和Adobe AIR的3D API*

关于作者

Richard Olsson是瑞典的一名交互设计师自由职业者，专注于Flash 3D和3D工作流。Richard也是开源引擎Away3D的核心开发者之一，主要负责元素管理、工具工作流以及开源、开放标准的文件格式AWD及其SDK。他是一个活跃的会议讲师，并且是"The Essential Guide to 3D in Flash*" (2010, Friends Of ED) 一书的共同作者。