在Flex 3中创建3D产品查看器

感谢Jack Herrington 的贡献。
http://www.sitepoint.com/article/create-3d-product-viewer-flex-3/



本文是近期sitepoint.com网站上 competition we ran to promote Flex articles 获奖文章。

记得第一次在 Mini USA site 上看到 Mini Configurator 时，我真是无比地兴奋，很喜欢操控它的颜色和选项，那真是一次难忘的体验，而只有 Flash 应用程序能够提供这样的体验。我确信它的销量会超过很多Minis。

从那以后，我就想自己创建一个。在本文中，我将向您展示如何创建。在此，假设您已经了解了Flex 3 的基本操作，了解如何使用 Flex Builder 3 编辑器并熟悉 MXML 和 ActionScript 3 ，能够创建基本的应用程序。如果您已经阅读了入门教程或者想要学习更多有关知识，请访问 Rhys Tague's beginner's tutorial。

开始

“配置器”(configurator)的思路相当简单：提供一些 3D 对象模型，用户可以更改颜色、隐藏和显示模型的不同部分。

要创建配置器，需具备三个条件。

1.     一个 3D 建模工具

2.     一个 3D 对象模型（通过下载获得或自己创建）

3.     一个在 Flex 应用程序中建模的显示工具
对于 3D 建模工具，我发现 Google's Sketchup 非常理想。它是免费的且一直有不错的表现。另一个优点就是 Sketchup 3D Warehouse 提供了海量的 Sketchup 格式的模型数据库。
下载并安装 Sketchup 后，我访问 3D 仓库并为应用程序挑选了一个模型。在本文中，我选择了迪斯尼电影Tron 中的一个 light cycle。一方面出于文化原因（每个真正的 geek 都喜欢这部电影），另一方面是因为它的形状非常简单，用户可以轻松进行更改（例如改变它的颜色）。

下图显示我使用的 light cycle 模型。


上图中的 light cycle 模型的格式是不精确的。起初是两个 light cycle，我删除了第二个并把第一个稍作倾斜，这样是为了获得最佳垂直的形态，我建议您采取同样的操作，

您也应该重新放置模型，使它以原点为中心（在 Sketchup 中，红色、绿色和蓝色线的交叉点表示原点）。这一步非常重要，因为当您加载模型时，你需要知道模型在场景中的位置，如果模型在空间中四处浮动，要发现它是很困难的，所以确保模型以点（0.0.0.）为中心。

要把 light cycle 导入到 Flex 应用程序中，需要以标准文件格式保存。3D 任务最常使用的格式应该是 Collada，但不幸的是，只有 Sketchup Pro 提供Export to Collada format 功能。

幸运的是，我有自己的小窍门：如果以 Google Earth 格式导出模型， 在Google Earth .kmz 文件中隐藏了一个 Collada 文件。需要把 Google Earth 文件的扩展名从 .kmz 改成 .zip，然后解压这个文件，在所有解压的文件中，您会发现一个名为 models 的目录，其中包含 Collada 模型。瞧！您已经从 Sketchup 免费版本中导出一个 Collada 文件了！

安装 PaperVision 3D

有 了 Collada 模型后，需要找到一个能够把 light cycle 导入到 Flex 应用程序中的方法。首先，需要选择用于显示 Flash 的 3D 呈现引擎。目前，有两种免费的 3D 引擎可供选择：PaperVision 3D 和 Away3D。本例中，我选择的是 PaperVision，因为它集成 ASCollada 库，ASCollada 库是一个非常全面的 Collada ActionScript 解析程序。

要下载最新 PaperVision 3D 版本，需要从 PaperVision Subversion repository 执行 SVN 签出。如果您不习惯使用 Subversion，可以从 this article's code archive 下载我在创建本例中所使用的文件。

然后创建一个新的 Flex 应用程序项目（使用 Flex Builder 3 或 Flex 3 SDK）并复制 GreatWhite 分支中的 com 和 org 目录到您的 Flex 应用程序项目中。

下一步，创建一个新的 assets 文件夹，把我从 Sketchup 中导出的模型文件复制到该文件夹中，命名为 cycle.dae。如果您的模型包含纹理文件，则需要把这些文件也复制到 Flex 项目中，您还需要编辑.dae 文件（实际上就是XML 文件），以确保纹理对象指向正确的纹理路径。不过我在本例中使用的 light cycle 模型不使用任何的纹理。
如果大家没有按以上步骤作出模型，我们下面提供了该模型的下载。
一切就绪，您的项目应该如下图所示。


assets 目录保存所需的模型和纹理，而com 和 org 文件夹保存 PaperVision Great White 代码。
查看模型
让我们来试一试，先从简单的入手：查看模型。下面给出了此Flex 应用程序代码（称为 model.mxml）：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" 
 creationComplete="onInit(event);"> 
<mx:Script> 
<![CDATA[ 
import mx.core.UIComponent; 

import org.papervision3d.cameras.FreeCamera3D; 
import org.papervision3d.render.BasicRenderEngine; 
import org.papervision3d.objects.parsers.DAE; 
import org.papervision3d.objects.DisplayObject3D; 
import org.papervision3d.scenes.Scene3D; 
import org.papervision3d.view.Viewport3D; 

private var renderer:BasicRenderEngine = new BasicRenderEngine(); 
private var scene:Scene3D = new Scene3D(); 
private var camera:FreeCamera3D = new FreeCamera3D(); 
private var viewport:Viewport3D = new Viewport3D( 200, 200, true, true ); 

[Embed(source="assets/cycle.dae", mimeType="application/octet-stream")] private var 
MyModel:Class; 
protected function onInit( event:Event ) : void { 
 var flexComp:UIComponent = new UIComponent(); 
 cnvUnderneath.addChild( flexComp ); 
 flexComp.addChild( viewport ); 
 var modelCol:DAE = new DAE(); 
 modelCol.load( XML( new MyModel() ) ); 
 var model:DisplayObject3D = scene.addChild( modelCol ); 
 camera.y = -2000; 
 camera.z = 2500; 
 camera.lookAt( model ); 
 addEventListener(Event.ENTER_FRAME,onEnterFrame); 
} 

private function onEnterFrame( event : Event ):void 
{ 
 renderer.renderScene(scene,camera,viewport); 
} 
]]> 
</mx:Script> 
<mx:Canvas id="cnvUnderneath" width="100%" height="100%" /> 
</mx:Application>

这大概和3D 上手一样简单，当然，也不是特别简单。要以 3D 呈现，需要获得以下 4 方面的信息：

1. 场景：空间内模型的布局（一个或多个模型）。

2. 视口：用于接受呈现图像的 Flash 子画面。

3. 相机：就是我们所说的相机，或确切地说是场景中相机的位置和旋转。

4. 呈现程序：捕捉场景或相机并呈现视口图像的引擎。

如果程序正确，当应用程序启动时，将调用onInit 方法并执行以下操作：

1. 加载模型。

2. 添加模型到场景。

3. 定位相机。

4. 使相机对准模型。

由于模型定位在（0.0.0）位置，所以上面的代码需要通过调整y 和z坐标，从模型向后移动相机。通过使用呈现程序将场景呈现到视口中，onEnterFrame 方法完成此项工作。

在 Flex Builder 3 中启动应用程序，将看到如图 3 所示的视图。


效果还算理想！事实上，我们此处的效果意义重大——特别是考虑到 Collada 实际上是一个非常复杂的XML标准。您也许会发现不是所有从 Sketchup 导出的模型都能使用 PaperVision。事实上，您可能必须简化 Sketchup 模型（从而简化形状）和Flex 应用程序，以创作更加优秀的作品。

另一个不能忽视的要点是：模型越复杂，用来加载和呈现的时间就越长。因此，您应该尽量使模型保持简单，例如，如果模型是一辆汽车，您想让用户自行选择机壳的颜色，那么您的模型不应该包含汽车内部的信息，所有内部材料都会增加不必要的复杂性并导致性能的降低和延长加载时间。

与模型交互

为了简化操作，我们把配置器用户能改变的元素限定为某一方面，即 light cycle 的颜色。这意味着我们将更改模型使用“材料”的颜色。所有 3D 模型都是由采用某种“材料”的多边形构成的，材料可以着色、添加阴影效果、纹理效果、凹凸映射（bump-mapped）和改变成各种风格的形状。在本例中，我们使用添加阴影的颜色材料。

light cycle 颜色配置器的代码如下所示：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" 
creationComplete="onInit(event);"> 
<mx:Script> 
<![CDATA[ 
import mx.utils.ColorUtil; 
import mx.core.UIComponent; 

import org.papervision3d.materials.utils.MaterialsList; 
â‹® 
import org.papervision3d.lights.PointLight3D; 

private var renderer:BasicRenderEngine = new BasicRenderEngine(); 
private var scene:Scene3D = new Scene3D(); 
private var camera:FreeCamera3D = new FreeCamera3D(); 
private var viewport:Viewport3D = new Viewport3D( 200, 200, true, true ); 
private var model:DisplayObject3D = null; 

[Embed(source="assets/cycle.dae", mimeType="application/octet-stream")] private var MyModel:Class; 

protected function onInit( event:Event ) : void { 
 var flexComp:UIComponent = new UIComponent(); 
 cnvUnderneath.addChild( flexComp ); 
 flexComp.addChild( viewport ); 

 loadModel(); 

 camera.y = -2700; 
 camera.x = 0; 
 camera.z = 2000; 
 camera.lookAt( model ); 
 addEventListener(Event.ENTER_FRAME,onEnterFrame); 
} 
private function loadModel() : void { 
 if ( model != null ) 
 scene.removeChild( model ); 
 var light:PointLight3D = new PointLight3D( true,true ); 
 light.z = -2000; 
 light.x = 500; 
 light.y = 500; 
 var lightColor:uint = 0x111111; 
 var modelCol:DAE = new DAE(); 
 modelCol.scale = 1.1; 
 modelCol.load( XML( new MyModel() ), new MaterialsList( { 
   material0:new FlatShadeMaterial( light, 0x000000, lightColor ), 
   ForegroundColor:new FlatShadeMaterial( light, 0x000000, lightColor ), 
   material1:new FlatShadeMaterial( light, clrPicker.selectedColor, 
     lightColor ), 
   material2:new FlatShadeMaterial( light, 
   mx.utils.ColorUtil.adjustBrightness(clrPicker.selectedColor,-20), lightColor ), 
   FrontColor:new FlatShadeMaterial( light, 0xFFFFFF, lightColor ), 
   material3:new FlatShadeMaterial( light, 0x000099, lightColor ), 
   material4:new FlatShadeMaterial( light, 
   mx.utils.ColorUtil.adjustBrightness(clrPicker.selectedColor,-200), lightColor ) 
 } ) ); 
 modelCol.roll( 28 ); 

 model = scene.addChild( modelCol ); 

 light.lookAt(model); 
} 
private function onEnterFrame( event : Event ):void 
{ 
 renderer.renderScene(scene,camera,viewport); 
} 
]]> 
</mx:Script> 
<mx:Panel title="Properties"> 
 <mx:Form> 
   <mx:FormItem label="Color"> 
     <mx:ColorPicker id="clrPicker" selectedColor="#8888DD" 
       change="loadModel();" /> 
   </mx:FormItem> 
 </mx:Form> 
</mx:Panel> 
<mx:Canvas id="cnvUnderneath" width="100%" height="100%" /> 
</mx:Application>

如您所见，我已经把加载模型的代码移动到一个新的名为 loadModel的方法当中。当 Flex 应用程序启动或用户选择新的颜色时，将执行这个方法。

代码还为加载 Collada light cycle 模型的 DAE 解析程序提供了一个 MaterialList 对象。这些材料对应于 Google Sketchup 导出的材料。在查找 DAE 文件并试验使用何种材料更改哪一部分 Cycle的过程中，我找到了这些材料名称。

我为颜色部分选择的材料是 FlatShadedMaterial，该材料具备：

l  光源

l  材料颜色

l  光的颜色

我使用颜色拾取器（color picker）提供的颜色，并使用ColorUtil Flex 类对其进行明暗调整。

在 Flex Builder 中运行配置器应用程序会产生如下结果。


现在，用户可以使用标准 ColorPicker Our控件选择颜色，light cycle 模型的颜色也会随之更改。

通过提供光源，实际上增加了模型的颜色深度，而这在第一次呈现时不是很明显的。此外，由于我们的模型是从多边形构造的，这实际上强化了整个"Tron" 的外观和感觉。

进一步操作

在本例中，您还可以继续进行其他方面的操作，例如通过调整模型内DisplayObject3Delements 属性上的 visible 参数，可以隐藏或显示模型的各个部分。通过允许用户使用鼠标更改相机的位置，可以添加与模型之间的直接交互，甚至客户需要特定效果时，可以在模型上使用 Flex 效果，使之发亮、淡出或者缩放。

无论您采取何种操作，都将从代码中获得很多乐趣（不要忘记从此处下载！），我期待不久的将来，能够在某个网上商店看到您的作品！