查看flex版本_在Flex 3中创建3D产品查看器

查看flex版本

This is the winning article from the recent competition we ran to promote Flex articles on sitepoint.com.

这是我们最近在sitepoint.com上推广Flex文章的竞赛中的获奖文章。

I remember the first time I saw the Mini Configurator on the Mini USA site. I was blown away — I loved just playing with the colors and the options — it was a truly immersive experience of the kind that only Flash applications can offer, and I’m sure it sold more than a few Minis.

我记得我第一次在Mini USA网站上看到Mini Configurator 。 我被震撼了-我喜欢只玩颜色和选件-这是只有Flash应用程序才能提供的那种真正的身临其境的体验，而且我确信它的销量超过了几个Mini。

Ever since then I’ve wanted to create one of my own, and in this article I’ll show you how to do just that. For this example, I’ll assume that you’re across the basics of working with Flex 3 — that you’re set up with an editor such as Flex Builder 3, are familiar with MXML and ActionScript 3, and can create basic applications. If you’re after a beginner’s tutorial, or need a refresher, try Rhys Tague’s beginner’s tutorial.

从那时起，我一直想创建自己的一个，在本文中，我将向您展示如何做到这一点。 对于本示例，我假设您具有使用Flex 3的基础知识—使用诸如Flex Builder 3之类的编辑器进行设置，熟悉MXML和ActionScript 3，并且可以创建基本应用程序。 如果您正在寻找初学者的教程，或者需要复习，请尝试Rhys Tague的初学者的教程 。

入门 (Getting Started)

The idea of a "configurator" is pretty simple: provide a 3D model of some object, then allow the user to change the colors, or to hide and show various parts of the model.

“配置器”的概念非常简单：提供某些对象的3D模型，然后允许用户更改颜色或隐藏和显示模型的各个部分。

To build your own configurator, you need three things.

要构建自己的配置器，您需要三件事。

1. a 3D modeling tool
   3D建模工具
2. a 3D model of an object (either something that you’ve downloaded or created yourself)
   对象(您已下载或自己创建的东西)的3D模型
3. a tool for displaying that model in a Flex application
   在Flex应用程序中显示该模型的工具

As far as 3D modelling tools go, I’ve found that Google’s Sketchup is ideal. It’s free, which is always good, but the other bonus is the huge database of models in Sketchup format that are available in the Sketchup 3D Warehouse. After downloading and installing Sketchup, I visited the 3D warehouse and selected a model to use in my application. For this article, I’ve chosen one of the light cycles from the Disney movie Tron. My decision to use this object was partly cultural (every true geek loves the movie) and partly because it’s a fairly simple shape, so allowing the user to alter it (for example, by changing its color) wouldn’t be too complicated.

就3D建模工具而言，我发现Google的Sketchup是理想的选择。 它是免费的，总是很不错，但是另一个好处是， Sketchup 3D模型库中提供了Sketchup格式的庞大模型数据库。 下载并安装Sketchup之后，我参观了3D仓库并选择了要在我的应用程序中使用的模型。 在本文中，我选择了迪士尼电影Tron中的光周期之一。 我决定使用此对象的决定部分是出于文化因素(每个真正的极客都喜欢这部电影)，部分原因是它的形状非常简单，因此允许用户对其进行更改(例如，通过更改其颜色)不会太复杂。

The light cycle model I’ve used is displayed in the image below.

我使用的光周期模型显示在下图中。

My model light cycle didn’t actually exist in the exact format pictured above. To begin with, there were a pair of light cycles — I deleted the second one, and tilted the remaining cycle a little, in order to begin with a shape that was perfectly vertical. I’d recommend you do the same for your own model.

我的模型光周期实际上不存在上图所示的确切格式。 首先，有一对轻循环-我删除了第二个轻循环，并稍微倾斜了剩余的循环，以便从完全垂直的形状开始。 我建议您对自己的模型进行相同的操作。

You should also reposition your model so that it’s centred around the origin point (this point is represented by the intersection of the red, green, and blue lines in Sketchup). This step is really important, because when you load the model you want to know where it exists in your scene. If the model is floating off in space somewhere, it’s going to be difficult to find, so be sure it’s oriented around the point (0, 0, 0).

您还应该重新定位模型，使其以原点为中心(此点由Sketchup中的红线，绿线和蓝线的交点表示)。 这一步非常重要，因为加载模型时，您想知道模型在场景中的位置。 如果模型漂浮在某个地方的空间中，那么将很难找到它，因此请确保它围绕点(0，0，0)定向。

To import the light cycle into your Flex application, you need to save it in a standard file format. The format that seems to be the most popular for 3D tasks is Collada, but unfortunately the Export to Collada format functionality is only available in Sketchup Pro.

要将光周期导入到Flex应用程序中，您需要将其保存为标准文件格式。 似乎最受3D任务欢迎的格式是Collada，但不幸的是，“ 导出为Collada”格式功能仅在Sketchup Pro中可用。

Luckily, I have a trick up my sleeve: if you export the model in Google Earth format, there’s a Collada file hidden in the Google Earth .kmz file. All you need to do is change the extension of the Google Earth file from .kmz to .zip, and unzip the file. Among the unzipped files you’ll find a directory named models that contains the Collada model. Voila! You’ve exported a Collada file from the free version of Sketchup!

幸运的是，我有个窍门：如果您以Google Earth格式导出模型，则Google Earth .kmz文件中会隐藏一个Collada文件。 您需要做的就是将Google Earth文件的扩展名从.kmz为.zip ，然后解压缩该文件。 在解压缩的文件中，您将找到一个名为models的目录，其中包含Collada模型。 瞧！ 您已从免费版的Sketchup中导出了Collada文件！

安装PaperVision 3D (Installing PaperVision 3D)

With our Collada model in hand, it’s time for us to find a way import our light cycle into a Flex application. Our first task is to select a 3D rendering engine for Flash to display it with. There are two free 3D engines to choose from at the moment; PaperVision 3D and Away3D. For this example, I’ve chosen PaperVision because of its integration with the ASCollada library, which is a very comprehensive Collada parser for ActionScript.

有了我们的Collada模型，是时候寻找一种将光周期导入Flex应用程序的方法了。 我们的首要任务是为Flash选择3D渲染引擎进行显示。 目前有两个免费的3D引擎可供选择； PaperVision 3D和Away3D 。 在此示例中，我选择PaperVision是因为它与ASCollada库集成在一起，该库是ActionScript的非常全面的Collada解析器。

To download the latest version of PaperVision 3D, perform an SVN checkout from the PaperVision Subversion repository. If you’re not comfortable working with Subversion, you can download the files that I’ve used to create this example from this article’s code archive.

要下载最新版本的PaperVision 3D，请从PaperVision Subversion存储库中执行SVN签出。 如果您不习惯使用Subversion，则可以从本文的代码档案中下载用于创建此示例的文件 。

Then create a new Flex application project (either using Flex Builder 3 or the Flex 3 SDK) and copy the com and org directories from the GreatWhite branch into your Flex application project.

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

Next, create a new assets folder, and copy the model file I exported from Sketchup into it; call that file cycle.dae. If your model contains texture files, then you’ll need to copy those files into your Flex project as well. You’ll also need to edit the .dae file (which is really just XML) to make sure that the texture objects point to the correct texture paths. Thankfully the little light cycle model that we’re using for this example doesn’t make use of any textures.

接下来，创建一个新的assets文件夹，并将我从Sketchup导出的模型文件复制到其中； 将该文件cycle.dae 。 如果您的模型包含纹理文件，则还需要将这些文件复制到Flex项目中。 您还需要编辑.dae文件(实际上只是XML)，以确保纹理对象指向正确的纹理路径。 值得庆幸的是，我们在此示例中使用的小光周期模型没有使用任何纹理。

With everything in place, your project should look something like the image shown below.

一切就绪后，您的项目应类似于下图所示。

The assets directory holds the model and any textures it needs. And the com and org folders come from the PaperVision Great White code.

assets目录包含模型及其所需的任何纹理。 com和org文件夹来自PaperVision Great White代码。

查看模型 (Viewing the Model)

To get our feet wet, we’ll first try something very simple: viewing the model. The code for this Flex application, which I’ve called model.mxml, is shown below:

为了弄湿我们，首先我们将尝试一些非常简单的事情：查看模型。 下面显示了此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>

This is about as simple as 3D gets — which, admittedly, is not particularly simple. To render something in 3D, you need four pieces of information:

这大约和3D一样简单-当然，这并不是特别简单。 要以3D形式渲染某些内容，您需要四项信息：

1. The Scene: The layout of the model, or models, in space.

   场景 ：一个或多个模型在空间中的布局。

2. The Viewport: The Flash sprite that will receive the rendered image.

   视口 ：将接收渲染图像的Flash精灵。

3. The Camera: This is the camera, or more specifically, the location and rotation of the camera within the scene.

   摄像机 ：这是摄像机，或更具体地说，是摄像机在场景中的位置和旋转。

4. The Renderer: The engine which takes the scene and camera and renders the image for the viewport.

   渲染器 ：引擎，用于捕获场景和摄影机并为视口渲染图像。

Without breaking down every line, our onInit method, which is called when the application starts up, does the following:

在不中断每一行的情况下，我们的onInit方法(在应用程序启动时调用)执行以下操作：

1. Load the model.
   加载模型。
2. Add the model to the scene.
   将模型添加到场景。
3. Position the camera.
   放置相机。
4. Have the camera look at the model.
   让相机看一下模型。

Since our model is located at position (0, 0, 0), the code above moves the camera back from the model by adjusting the y and z coordinates. The onEnterFrame method finishes the job by using the renderer to render the scene into the viewport.

由于我们的模型位于位置(0，0，0)，因此上面的代码通过调整y和z坐标将相机从模型移回。 onEnterFrame方法通过使用渲染器将场景渲染到视口中来完成工作。

Launch this application in Flex Builder 3, and you should see something like the view shown in Figure 3.

在Flex Builder 3中启动此应用程序，您应该看到类似图3所示的视图。

Not too shabby! In fact, what we’ve achieved here is quite significant — especially considering that Collada is actually a very complex XML standard. You may find that not all models exported from Sketchup will work with PaperVision — in fact, you’ll probably have to do some tweaking of both your Sketchup model (to simplify the shape) and your Flex application in order to produce something that works well.

不是太寒酸！ 实际上，我们在这里取得的成就非常重要-特别是考虑到Collada实际上是一个非常复杂的XML标准。 您可能会发现，并非所有从Sketchup导出的模型都可以在PaperVision上使用-实际上，您可能必须对Sketchup模型(以简化形状)和Flex应用程序进行一些调整，以产生效果良好的产品。

One other important point to remember is that the more complicated your model, the longer it will take to load and render. You should therefore keep your model as simple as possible. For example, if your model is of a car, and you want to allow your users to choose the paint color of the chassis, then your model should not include any information about the car’s interior. All of that interior stuff represents unnecessary complexity that will result in lower performance and longer load times for your user.

要记住的另一重要点是，模型越复杂，加载和渲染所花费的时间就越长。 因此，您应该使模型尽可能简单 。 例如，如果您的模型是汽车，并且您希望允许用户选择底盘的油漆颜色，则您的模型不应包含有关汽车内部的任何信息。 所有这些内部内容都表示不必要的复杂性，这将导致用户降低性能并延长加载时间。

与模型互动 (Interacting With the Model)

To keep things simple, we’ll restrict the changes that our configurator users can make to just one — the color of the light cycle. This means we’re going to change the color of the "material" used in the model. All 3D models are composed of polygons covered in a "material." That material can be colored, shaded, textured, bump-mapped, and distorted in all manner of ways. In this case, we’re going to use a shaded color material.

为简单起见，我们将配置器用户只能进行的更改(灯光周期的颜色)限制为一种。 这意味着我们将更改模型中使用的“材料”的颜色。 所有3D模型均由“材料”中覆盖的多边形组成。 该材料可以以各种方式进行着色，着色，纹理化，凹凸映射和变形。 在这种情况下，我们将使用带阴影的颜色材料。

The code for our light cycle color configurator is shown below:

我们的光周期颜色配置器的代码如下所示：

<?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>

As you can see, I’ve moved the code that loads the model into a new method called loadModel. This method is executed when the Flex application starts up, as well as any time our user chooses a new color.

如您所见，我已经将将模型加载到新代码中的代码称为loadModel 。 当Flex应用程序启动时以及用户选择新颜色时，将执行此方法。

Our code also provides a MaterialList object to the DAE parser that loads the Collada light cycle model. This list of material corresponds to the materials exported by Google Sketchup. I found the names by looking into the DAE file myself and experimenting with which materials changed which portions of the Cycle.

我们的代码还向加载Collada光周期模型的DAE解析器提供了MaterialList对象。 该材料列表与Google Sketchup导出的材料相对应。 我通过自己查看DAE文件并尝试使用哪种材料更改了循环的哪些部分来找到了这些名称。

The material I chose for the color portions was a FlatShadedMaterial. This material takes:

我为颜色部分选择的材料是FlatShadedMaterial 。 该材料需要：

• a light source
  光源
• a color for the material
  材料的颜色
• a color for the light
  灯光的颜色

We’re using the color provided by the color picker, and adjusting it to make it darker or lighter using the ColorUtil Flex class.

我们正在使用颜色选择器提供的颜色，并使用ColorUtil Flex类对其进行调整以使其更暗或更亮。

Running our configurator application in Flex Builder produces the following result.

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

Our users can now select a color using the standard ColorPicker control, and the light cycle model will change accordingly.

现在，我们的用户可以使用标准的ColorPicker控件选择一种颜色，并且光周期模型也会相应更改。

Providing a light source really adds to our model some depth that wasn’t apparent in the first rendering. Also, the fact that our model is clearly constructed from polygons actually adds to the whole "Tron" look and feel.

提供光源确实为我们的模型增加了一些深度，这在第一次渲染中是不明显的。 同样，我们的模型显然是由多边形构成的，这一事实实际上增加了整个“ Tron”的外观。

从这往哪儿走 (Where to Go From Here)

There are lots of directions in which you could take this example. For example, you could hide or show various parts of the model by adjusting the visible parameter on the DisplayObject3Delements property within the model; you could add some direct interaction with the model by allowing the user to alter the position of the camera using the mouse; you could even use Flex effects on the model to make it glow, fade or zoom away when the customer takes it for a spin!

您可以在许多指导中使用此示例。 例如，您可以通过调整模型中DisplayObject3Delements属性上的visible参数来隐藏或显示模型的各个部分。 您可以通过允许用户使用鼠标更改相机的位置来与模型添加一些直接交互； 您甚至可以在模型上使用Flex效果，以使它在客户旋转时发光，褪色或缩小！

Whichever direction you take, you can have lots of fun with this code (don’t forget to download it!). I look forward to seeing your creations in an online store window soon!

无论您朝哪个方向前进，您都可以在此代码中找到很多乐趣(不要忘记下载它 ！)。 我期待很快在在线商店窗口中看到您的作品！

翻译自: https://www.sitepoint.com/create-3d-product-viewer-flex-3/

查看flex版本