最近，我进行了很多次的Adobe Flex 开发职位的面试（作为自由职业，这点需要澄清，如果我现在的老板碰巧阅读到该文的话）。几乎每一次的面试，Flex框架的问题最终都会被提出来（通常就是 Cairngorm）。我就会解释尽管我知道这些框架的存在，但是我从没有真正的去用它们。这个决定看起来对我来说足够理智，但是这些不能给面试带来深刻 的印象。我开始厌倦因为我的“对Flex框架缺乏经验”而失去项目，我展开了一项任务仅我所能的去学习它们。

非常巧，本地用户组的下一次聚会提到了Flex框架的话题，具体提到Cairngorm, Mate以及PureMVC(你可以在这里看观看)。我时常在Flex show播客上听到所有的这些框架，但是从来没有真正的意识到他们是如何运作的以及他们之间的不同，本文的目的就在于指出这些。

本文提供了当前最流行的Flex框架，你可以根据了解来选择最适合你的团队或者项目的需求的框架。本文覆盖了 Cairngorm、Mate、PureMVC以及Swiz 框架。我特意选择了这些框架是因为它们已经被Flex show 播客提及并且或者已经被类似360|Flex 的会议所提出。

要求

完成本教程, 您需要安装以下软件和文件: Flex Builder 3

• 试用
• 购买

必备知识

读者需要知道什么是Adobe Flex。当然，如果读者对框架涉及的内容有基础的了解，对面向对象编程原理以及设计模式的基础了解的话，对于阅读本文那就更有帮助了。

Cairngorm 框架

Cairngorm是已知的最为古老与最好的Flex 框架。它实际上是一个微架构——它提供了一系列已经被证明可以很好的互相协作的设计模式的集合。Cairngorm采用累来自Java开发世界的笨重并且 把焦点集中到了三个关键区域：处理用户行为，包装服务端交互与业务逻辑，并且管理客户端状态以及在用户界面（UI）上体现客户端状态。

在Cairngorm构建一个项目包含了拆散你的应用到若干个包中并且扩展Cairngorm的类。如下是一个Cairngorm 项目 主要包含的部分和类。

• ModelLocator —— 作为数据存贮角色的单件——反映程序的状态。单件类的性质抱枕了程序中所有的组件都访问相同的数据。
• ServeiceLocator 是另外一个单件，它作为集中存贮例如HTTPService的服务的角色存在。同样，因为该类是一个单件，所有程序中的组件都会访问相同的服务。
• 业务逻辑被包装到了实现了命令模式的Command类中。这些类描述了程序响应用户事件的逻辑。
• 事件会被FrontController 类处理，它会针对事件来执行相应的command类。每个程序可以回应的用户事件都必须被注册到它所附和的command类。
• Delegate 类会被用来做远端服务访问与反馈的代理。

优点

Cairngorm是Flex社区中众所周知的，并且是一个Adobe 开源网站上的项目，有良好的支持并且一个活跃的开发者社区继续为它工作。此外，它借用了来自Java开发世界的已被证明的策略。最后，它非常适合团队开发，因为它提供了一个高级的结构化的一套方法来允许分发任务进行创建应用。

缺点

或许对Cairngrom做出的最多的批评就是它需要你去写非常多的类。在Cairngorm中，每个事件映射到一个Command；因此，你不得 不为每个在你的应用中可以被触发的事件写一个对应的command类。另外，你必须要写其他的command必须用到的其他类，例如delegate。这 会快速的增加一个小型应用的类的数量到一个巨大的数字。

第二，因为Cairngorm 实现了它自己的处理事件的方法，这个会把内建的Flex 事件模型变得错综复杂。它也有其他一些限制。因为每个事件都必须要有它自己的command类，你就被限制只能为每个事件提供一个响应器 （responder）.并且，Cairngorm事件并不会冒泡，所以如果你想要通知其他更高一级的容器，就只能自己来处理了。

第三条普遍的批评就是框架依赖于全局单例，让想要模块化和单元测试变的困难。虽然你可以从数个单例中破坏这个框架模型让这些处理简单些，但是额外的工作需求会复杂化流程。

资源

• Cairngorm developer documentation
• Developing Flex RIAs with Cairngorm microarchitecture – Part 1: Introducing Cairngorm (Steven Webster and Leon Tanner, August 2008)
• Example Cairngorm project

Mate 框架

Mate 是一个基于标签的事件驱动型框架。基于标签意味着它可以完全使用MXML实现。事件驱动使框架的主要焦点放在更简单的来定义事件的回应。

使用Mate来创建项目只需要两个基础的必要条件： 你必须有一个或多个事件，以及你必须有一个成为“事件映射”的MXML文件——其实就是在主要的应用程序文件中包含了一个简单的MXML文件。它定义了你 想要监听的事件以及这些事件该如何被处理。你必须至少有这些文件中的一个，在需要的情况下也可以使用多个事件映射。

Mate也实现了依赖注入的思想 ——有时，适用于好莱坞原则，即 “不要给我打电话，我们会打电话给你们”.对象被这样构造出来：需要的数据会被供给或者注入到类中。也就是说，类不去呼叫外部获取数据（即“不要给我打电 话”），而是接受他们所需要的数据（即（“我们会打电话给你们”））

优点

Mate 通过它对依赖注入的使用实现松耦合。因为组件不用依赖全局单例，对场景来说他们是自由人。Mate不限制你使用Flex的内建事件模型，也不会像 cairngorm一样限制你每个事件都要一个单独的响应处理。Mate 的MXML文件以及标签直接并且便于使用，同时如果你卡住了，它提供了不错的文档并在网站上有大量的代码范例。

缺点

Mate只使用了MXML。所以，如果你是那种做每件事都喜欢使用ActionScript类的人，那么你就必须要调整你的正常习惯。因为Mate 不会为你的应用定义一个结构，它留给你来定义。从此以后，你将会不得不协调自己的团队来确保你的所有开发人员以一个相容的方式编码。最后，如果你碰巧需要 和 Adobe LiveCycle Data Services ES协作，那么请注意，Mate一般不会处理LiveCycle Data Sevices ES 提供的数据管理。

资源

• Mate documentation
• Example projects
• Podcast interview with Mate framework creator Laura Arguello

PureMVC 框架

虽然Flex也可以使用PureMVC框架，但是它实际上并不是作为一个Flex框架而设计的。PureMVC的创建者希望PureMVC框架是与语言无关的。其实，如果你访问他的网站，你会发现在多种语言上的实现以及代码范例。

PureMVC 以模型—视图—控制器模式（MVC 模式）为中心，以把项目切分到模型，视图以及控制器层为目标。PureMVC中通过是Model，View以及Controller，这三个单件类体现了 这些层——而为了帮着这些层之间通讯使用了第四个单件类Façade ，同时他也作为中央存贮器的角色存在。

和Cairngorm很像，创建一个使用PureMVC框架的项目，需要分割你的项目到若干包中，然后通过继承框架的类来显现你的定制类。PureMVC 还加入了作为程序主入口点的Façade类。

优点

类似Cairngorm，PureMVC一个稳定的框架并且拥有一个庞大的活跃社区来支持它。因为它为应用需要如何被创建以及开发人员之间的标准化编码提供了一个意义明确的结构，所以它也非常适合团队开发。

缺点=

由于对单件的依赖，PureMVC 很容易就获得与Cairngorm相同的批评。它并不是一个专门针对Flex的框架，所以它并不会像Cairngorm般利用MXML的特点。和 Cairngorm一样，PureMVC对于事件处理拥有它自己的方法，并且它会使标准的Flex事件模型更难运作。PuremvC 是一个相当复杂的框架，相对更难快速学会。除非你的团队非常熟悉它，培训新的雇员会提高生产时间。

最后，还是和Cairngorm 一样，PureMVC框架需要创建很多类，这些创建工作会增加生产时间和项目的大小。

资源

• Documentation and licensing
• Example project
• Podcast interview with PureMVC framework creator Cliff Hall

Swiz框架

Swiz 是一个为简化事件处理与异步远端方法呼叫提供方法的控制反转（IoC）框架。Swiz框架主要的焦点放在以一种简单有效的方式提供一个可靠的MVC规范。 和Cairngorm以及PureMVC所不同的是，它直接回避了宏大的Java模式并且不会强调任何预定义的文件夹结构。

使用Swiz创建一个项目需要告诉Swiz框架关于你的应用的组件。在Swiz的核心，Swiz是一个集中的工厂模式。组件都会经由一个成为BeanLoader的工具类载入到这个工厂。当应用开始的时候，工厂处理这些组件的实例化。

与此同时，Swiz 通过Autowire这个自定义Metatag来提供依赖管理。Autowire标签是Swiz为你处理定义类之间依赖性的一个方法。

优点

Swiz是使用简单并且不用为你的项目强制定义结构。凭借它的Autowire 依赖注入系统，和Mate一样，既确保了组件之间的松耦合又为你管理了依赖性。同时，Swiz也和Mate一样，使用了内建的Flex事件处理机制，这一 点在使用内部单件实现了全局事件分发之类的重要方面是非常有帮助的。

缺点

然后，又是和Mate一样，Swiz并不为你的应用的结构定义许多，它留给你自己去做。所以，你将会不得不为你自己的团队协调来确保你的所有开发人员以兼容的方式编码。

第二，因为它使用了自定义的metatag，所以项目需要一些附加的设置——例如，设置一些额外的编译参数。或者这些步骤不困难，但是其他框架不需要，而Swiz却需要。文档指明了Flex 2用户，所以他在flex2之后的版本将不再是一个问题。

资源

• Documentation and examples
• Podcast interview with Swiz framework creator Chris Scott

做出你的选择

虽然还不是很彻底，但是这里提供的信息配合资源，应该能够为你对每个框架的方法，优点以及缺点提供了一个基本的了解。你会怎么从这些框架中选择一个超过其他框架的框架呢？

也许第一个问题是，我是否需要一个框架？Flex 与MXML 为快速构建应用提供了非常强健的一套方法。我一般不使用框架的原因是当我尝试适应框架的一套方法的时候需要做更多的工作，相比较仅仅使用Flex框架而 已。对我来说，一个框架需是一个能够让任务变得更简单并且提高生产率的东西，而不是某些我用它只是因为我可以或者因为我想要让自己成为一个更好的开发人员 而去使用。

就如本文开头写的，我在一个电话面试中所提到的，在给出为什么我没有选择使用一个框架的解释之后，采访者这样反应,"我必须在一个巨大的团队中工作。当然啦，你了解我需要多少有些了解框架的啦"。少许思考之后，我知道了他的意思。

使用框架的好处之一就是可以标准化一些事情如何被编码。也就是说，如果程序员A 和程序员B使用相同的框架为同一项目的两个部分工作，你可以很确定他们写的是兼容的。所以可能你需要问你自己的另外一个问题就是，你想要强制确定多少结构？

框架非常大量的检测了他们需要多少预定义的结构。如果你是工作在一个大型团队中，你可能想要比做自己的项目更多强制的结构。预定义的结构提 供的团队工作环境的简化和代码的一致性足够弥补你为一个更需要结构的框架创建所有必须的类而增加生产时间和项目大小。相比之下，如果你是一个项目上工作的 唯一开发人员并且你只是需要一些东西来是生活更简单速度更快的开发，然后可能就你需要一个那种不需要强调太多结构的框架来运用到你的项目上。

看起来， 选择一个正确的框架或者选择完全不使用框架， 只是开发人员的目标的一个功能呢个以及在哪个环境创建项目而已。我能给你的最好的建议就是诚实的高速你自己项目需要什么。我知道在我做完我的研究并且写了 本文之后，我放开了对于框架的观念，我认为它们的确实现了明确的需求。

补充

优秀的Flex 网站：
1：http://www.scalenine.com/
2：http://www.augitaly.com/flexgala/
3：http://www.adobe.com/devnet/flex/quickstart/your_first_application/
4：http://www.onflex.org/ted/
5：http://www.everythingflex.com/blog/
6：http://www.flex.org/
7：http://www.cflex.net/
8：ADOBE 官方实例下载

http://www.scalenine.com/themes/shadow/shadow.html

1.旋转

效果：http://www.alex-uhlmann.de/flash/adobe/blog/distortionEffects/effectCube/

代码：http://weblogs.macromedia.com/auhlmann/archives/DistortionEffects.zip

2.画布按钮

http://dougmccune.com/blog/2007/06/01/new-component-canvasbutton-added-to-flexlib/

3.鱼眼工具条

效果：http://dev.getoutsmart.com/labs/dock/

代码：http://dev.getoutsmart.com/labs/dock/dockdemo.zip

4.窗口

http://www.returnundefined.com/flexmdi/explorer/

http://window.diaztorres.com/bin-release/test_window.html

5.切换效果

http://blogs.digitalprimates.net/codeSlinger/samples/carousel/CarouselTest.html

6.图片展示

效果：http://flex.diaztorres.com/samples/aladinotest/aladino_test.html

代码：http://www.madeinflex.com/img/entries/2008/01/aladino.zip

7.自定义载入进度条

http://blog.diaztorres.com/2007/05/mipreloader/mipreloaderdemo.html

8.Flex Mac弹出窗口

http://blog.xsive.co.nz/archives/244

9.果冻特效弹出窗口

http://blog.sban.com.cn/2008/04/01/jelly-effect-alert-window.html

10.Alert弹出效果

http://www.cnblogs.com/taobataoma/archive/2008/01/13/1037082.html

11.自定义ToolTip

图片：http://everythingflex.com/flex2/ImageToolTip/Index.html

视频：http://labs.flexcoders.nl/samples/ToolTip/video/002/

弹性：http://labs.flexcoders.nl/samples/ToolTip/spring/001/

12. http://flanture.blogspot.com/2008/05/simple-flex-effects-example.html
13.果冻效果： http://blog.sban.com.cn/2008/04/01/jelly-effect-alert-window.html
14.BOOK：http://www.quietlyscheming.com/blog/components/flexbook/

1:聚光灯效果：

 实例：http://www.rphelan.com/flex/SpotlightDemo/SpotlightDemo.html

• ambientColor - color to apply to all pixels of the image
• angle - angle at which the spotlight is projected (in degrees)
• azimuth - angle between the image plane and the spotlight (in degrees)
• coneAngle - angle of the spotlight's "opening" (in degrees)
• distance - distance from the spotlight to the center point
• intensity - intensity of the spotlight
• position - x, y, z position of the spotlight
• spotColor - color of the spotlight

源文件：http://www.rphelan.com/flex/SpotlightDemo/srcview/index.html

2:放大镜效果：

 实例：http://www.rphelan.com/flex/MagnifyDemo/MagnifyDemo.html

• center ([0-2048, 0-2048]) - the center coordinates of the magnified area
• outerRadius (0-500) - the radius of the magnified part of the image
• innerRadius (0-500) - the radius of the fully magnified part of the image
• magnification (1-50) - the amount to magnify the image by (e.g. set to 2 for a 2x magnification)

源文件：http://www.rphelan.com/flex/MagnifyDemo/srcview/index.html

3：缩放模糊效果：

实例：http://www.rphelan.com/flex/ZoomBlurDemo/ZoomBlurDemo.html

• amount (0 - 0.5) - the amount of blur to apply
• center ([0 - 2048, 0 - 2048]) - the focal point of the blur

源文件：http://www.rphelan.com/flex/ZoomBlurDemo/srcview/index.html

4：浮雕效果：

实例：http://www.rphelan.com/flex/SharpenDemo/SharpenDemo.html

• amount (0 - 20) - the amount to sharpen the image by
• radius (0 - 1) - pixel distance to sample from

源文件：http://www.rphelan.com/flex/SharpenDemo/srcview/index.html

5：水波效果：

实例：http://www.rphelan.com/flex/WaveReflectionDemo/WaveReflectionDemo.html

2.[Embed]用来导入图片。
用法：

3.[DefaultProperty]用来将一个单一属性设定为某个类的默认属性。
用法：

4.[Event]用来声明分派给自定义类的事件。
用法很简单：

5.[Effect]定义一个自定义效果

6.[ArrayElementType]定义数组元素的数据类型

from django.conf.urls.defaults import *
import settings
urlpatterns = patterns('',
(r'^dailystory/', include('testAMF.dailystory.urls')),
(r'^admin/', include('django.contrib.admin.urls')),
)

from django.conf.urls.defaults import *
urlpatterns = patterns('',
(r'^gateway/$', 'testAMF.dailystory.amfgateway.storyGateway'),
(r'^(.*)$', 'django.views.static.serve', {'document_root':'dailystory/flex'}),
)

from django.db import models
class DailyStory(models.Model):
content = models.TextField()
def __unicode__(self):
return self.title
class Admin:
pass

from pyamf.remoting.gateway.django import DjangoGateway
from dailystory.models import DailyStory
def getDailyStory(request):
return DailyStory.objects.all()
storyGateway = DjangoGateway({
'dailystory.getDailyStory': getDailyStory,
})

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="initApp();">
<mx:Script>
<![CDATA[
import flash.events.NetStatusEvent;
import mx.collections.ArrayCollection;
import mx.rpc.AsyncToken;
import mx.rpc.AsyncResponder;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
private function initApp():void
{
var token:AsyncToken=djangoService.getDailyStory();
token.addResponder(new AsyncResponder(onGetDailyStory,faultHandler));
}
private function onGetDailyStory(re:ResultEvent, token:Object=null):void
{
var stories:Array = re.result as Array;
var storyCollection:ArrayCollection = new ArrayCollection(stories);
yesterdayStory.text = storyCollection.getItemAt(0).content;
}
private function faultHandler(fe:FaultEvent, token:Object=null):void
{
trace(fe.fault.faultDetail);
}
]]>
</mx:Script>
<mx:RemoteObject
id="djangoService"
destination="dailystory"
showBusyCursor="true">
</mx:RemoteObject>
<mx:TextArea id="yesterdayStory" x="582" y="130" height="118" width="242"/>
</mx:Application>

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="dailyStoryService" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="dailystory">
<channels>
<channel ref="dailyStoryChannel"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="dailyStoryChannel" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://localhost:8080/dailystory/gateway/" class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>

storyGateway = DjangoGateway({
'dailystory.getDailyStory': getDailyStory,
})

开始研究pyamf的用处了。
pyamf（http://www.pyamf.org）是一个很好的amf中间件，能跟django, twisted, google app engine等流行框架整合。现在我要做的就是pyamf结合django 1.0。据说flex通过amf做PRC调用似乎节省掉很多带宽。
下载
去官网找到svn地址，checkout下来之后install，很简单。python真是一种很简洁很强大的语言，和flex很配啊。
处理机制
既然跟django结合，就应该有一套处理request，response的机制。pyamf里对应的就是 pyamf.remoting.gateway.django模块。打开能看到有一个类class DjangoGateway(gateway.BaseGateway)，它就是整个处理流程的主干。class document很好的解释了它在django中的用法。仅仅需要在views.py中建立一个DjangoGateway实例，这个实例是urlmap 对应的处理函数，它把从django底层传递过来的request（其实是AMF编码过的）解码，并映射相应的python对象，然后执行注册的RPC方 法（就是flex调用amf过程中看到的方法调用）返回一个response，最后用AMF机制编码这个response，返回给django。这样 django再通过层层处理返回这个AMF信息给flex。如此便是一个完整的amf PRC调用过程。很多的server基本上都是基于类似的机制，通过中间件层层过滤request和response，达到隔离底层处理的目的。最后我们 能看到，django内部处理amf的调用是如此之简单。
DjangoGateway有两个方法很重要，一个是__call__（python的特殊名字方法，自己定义的方法不能用这些名字哦，__call__ 使得对象能像方法那样用，比如有对象a，执行a()相当于执行a.__call__()。也许可以猜到了，没错，在django里urlmap需要有一个 对应的处理函数，__call__就是起这个处理函数的作用）。还有一个就是getResponse方法。它的作用是处理解码后的request，这是一 些很普通的方法调用，因为request已经AMF解码了，它会寻找合适的PRC方法（选择的依据就是AMF指定的方法名，也就是flex调用amf url时的方法名）来处理request。我把这两个方法贴上来了。里面重点扯了一下__call__加深印象。

def getResponse(self, http_request, request):
"""
Processes the AMF request, returning an AMF response.
 
@param http_request: The underlying HTTP Request.
[...]

http://trials.adobe.com/Applications/.../FB3_WWEJ.exe
大小：　385.84 MB　；　已经压缩的 Flex Builder 3 安装文件
需要注册登录，才可下载。

Flex builder 3.0注册码（已经试过的，可用的）：

1377-4168-2018-0771-2432-1495

1377-4760-3354-0772-2773-8996

1377-4165-2080-7265-7813-8901

1377-4964-5021-8182-2399-8235

Flex builder 中要进行调试，就必须安装含debug的flash player版本。下载链接地址：

Adobe Flash Player 9 — Debugger Versions (aka debug players or content debuggers) for Flex and Flash Developers

12/3/2007 Updated debugger versions of Flash Player 9 (aka debug players or content debuggers) are available for Flex Builder 2 users and Flash CS3 Professional users. These new players are version 9.0.r115.

Download the Windows Flash Player 9 ActiveX control content debugger (for IE) (EXE, 1.59 MB)

Download the Windows Flash Player 9 Plugin content debugger (for Netscape-compatible browsers) (EXE, 1.56 MB)

Download the Windows Flash Player 9 Projector content debugger (EXE, 3.69 MB)

Download the Macintosh Flash Player 9 Plugin content debugger (Intel-based Macs) (DMG, 5.35 MB)

Download the Macintosh Flash Player 9 Plugin content debugger (PowerPC-based Macs) (DMG, 2.41 MB)

Download the Macintosh Flash Player 9 Projector content debugger (ZIP, 4.81 MB)

12/3/2007 Updated Linux debugger versions (aka debug players or content debuggers) of Flash Player 9 are now available. Additionally, the Linux standalone player (projector) is available for developers who wish to publish projectors on Linux operating systems.

Download the Linux debugger and standalone players (TAR.GZ, 9.29 MB)

For you technology lovers who are still kids at heart, Disneyland has recently opened up the Innoventions Dream Home, showcasing cool high tech integration in a futuristic home. What caught my attention was one invention called the Magic Mirror. Getting its name from the mirror in Snow White, this Magic Mirror does not tell you “who is the fairest of them all” (for that you’ll still need HotOrNot.com). What it does do is allow you to virtually try on clothes in your wardrobe. In fact, the Magic Mirror is not a mirror at all; it is a large display monitor with a video camera next to it.

Trying on a dress in the Magic Mirror. Photo: cepro.com

While the concept is neat and would probably be even more useful in the department store dressing room than the bedroom, by the looks of it in the video below, the concept is still far from the realism necessary for a technology like this to take off. A few years back, it was thought that by today, virtual clothes shopping would be mainstream, and companies like My Virtual Model had signed contracts with major apparel retailers to integrate their technology into online stores.

It turns out that the technology wasn’t ready, and by the looks of this Magic Mirror, it still has a long way to go.

Here’s how I think they do it:

The dress moves roughly according to the orientation of the head, so they are most likely using a simple real-time head tracker and applying the pose of the head to the top of the dress. The bottom seems to be animated randomly, or maybe through secondary animation.

Later this week I’ll post on a face tracking algorithm that could make this easily possible.

How could we do it better?

One imperfection is very noticeable: the dress doesn’t follow the shoulders and hips properly. Part of it may be anatomical (this is a guy after all), but I think this problem should be easily solved by tracking the silhouette (using background subtraction) and identifying the shoulders and hips using simple heuristics, e.g. areas of low curvature and roughly horizontal or vertical slopes. This would immediately improve the realism of this solution.

Another improvement would be to track features on the user’s T-shirt, so we can have a better estimate of the body pose, its size and maybe even the person’s sex. I’d start my search with Automatic Non-Rigid 3D Modeling from Video (Torresani and Hertzmann, 2004), since I remember being impressed with the results way back then: it handles occlusions and variations in illumination very nicely. In the picture below, you can see one of the researchers moving his hands in front of his T-shirt… the algorithm can still capture a 3D representation of the deforming T-shirt. Doing this in real-time may be challenging, but fast GPUs and multi-core systems should make it possible.

Still a Long Way to Go

With the method that we have suggested, there is one major sticking point that we have not addressed: content creation.  Assuming you have the ability to accurately track a person and render the image in real time, you still need a way to create the clothes in 3D.  This is not a simple task, as clothes can be highly variable in elasticity, reflectiveness, etc., which would make automation of the modeling process complex.

Before we see these Magic Mirrors in department stores like Sears or Macy’s that have hundreds of thousands of different apparel items each year, a method for automatic creation of clothing content will have to be developed.  And while automatic 3D content creation is going to take great strides in the next couple of years, the quality of 3D reconstruction needed for clothing is still a long way off.

public function init3D() : void {
camera.fov = 55;

//设置一个空物体作为两个球体的父对象
dummy = new DisplayObject3D();

//添加灯
light = new PointLight3D();
scene.addChild(light);

//添加一个噪波作为贴图
var bitmap : BitmapData = new BitmapData(256, 256, false, 0);
bitmap.perlinNoise(64, 64, 2, Math.random() * 3000, false, false, 7, true);

//环境贴图需要一个光源
var mat : EnvMapMaterial = new EnvMapMaterial(light, bitmap);

var s1 : Sphere = new Sphere(mat, 80, 8, 8);
s1.x = 300;
s1.z = -100;

//使用地球图片做纹理贴图
var s2 : Sphere = new Sphere(new BitmapMaterial(image.bitmapData), 120, 12, 12);
s2.x = -400;
s2.z = 100;

//把球体添加到空物体中
dummy.addChild(s1);
dummy.addChild(s2);

scene.addChild(dummy);

//DisplayObject3D(简称do3d)的层次结构和渲染对应的结构是分开的，接下来设置渲染的层次结构
//默认情况下do3d渲染到viewport.containerSprite中
//containerSprite是一个ViewportBaseLayer对象，继承自ViewportLayer，也是一个Sprite

//BitmapEffectLayer原先是Effect分支里的功能，现在整合到Great White里面来了
//把do3d渲染到BitmapEffectLayer可以添加一些Bitmap滤镜效果
var bfx : BitmapEffectLayer = new BitmapEffectLayer(viewport, 500, 500);
//ViewportLayer对象必须用addLayer语句添加到containerSprite
viewport.containerSprite.addLayer(bfx);

//把球体加进bfx层，记住do3d的层次结构和渲染对应的图层结构是分开的
//所以我们不能直接把dummy加进bfx层，这样dummy的子对象是不被一同加入的
bfx.addDisplayObject3D(s1);
bfx.addDisplayObject3D(s2);

//火焰效果很简单，添加一个效果对象就可以了
bfx.addEffect(new BitmapFireEffect(1, 1, 1, 1));

//effects数组可以索引属于图层的效果对象
bfx.effects[0].flameHeight = 1;

//设置bitmap每帧的移动量
bfx.setScroll(4, 3);

//出于CPU占用考虑，一般不会用很大的位图来生成效果。一种可用的做法是只把效果渲染到一块较小的区域内
//BitmapEffectLayer.setTracking(do3d)用于让图层跟随某个do3d在屏幕上的位置移动
//但先要允许do3d自动计算自身的屏幕坐标。例如：
//s1.autoCalcScreenCoords = true;
//bfx.setTracking(s1);

//添加遮罩层
var msk : Sprite = new Sprite();
msk.graphics.beginFill(0xFF0000);
msk.graphics.drawCircle(0, 0, 250);
msk.graphics.endFill();
//containerSprite既然继承自Sprite，那么自然可以用addChild来新增图层
viewport.containerSprite.addChild(msk);

//现在在containerSprite下面有两个图层，我们可以设置遮罩
bfx.mask = msk;

//添加外边框作为修饰
var frame : Sprite = new Sprite();
frame.graphics.lineStyle(10, 0×222222);
frame.graphics.drawCircle(0, 0, 250);
viewport.containerSprite.addChild(frame);

addEventListener(Event.ENTER_FRAME, tick);
}

相关文章

• Papervision3d Tutorials in Flex 3
• Papervision3D入门教程

June 13, 2001 - By Dave Salvator

转载请注明出处。

介绍

从令人着迷的电影特效，到医学成像、电子游戏和更多的领域，3D图形所带来的冲击不亚于一场革命。这项从五年前（1996年）开始，带来了个人电脑消费风暴的技术，根源于学术界和军事。其实从某种程度上来说，我们今天在个人电脑上所享受的3D图形算是一种“和平红利”，许多最初设计军事模拟器的专家如今在从事3D图形芯片，电影和游戏开发产业的工作。

除娱乐之外，3D图形技术在计算机辅助设计（CAD）上为工业设计带来了巨大的飞跃。制造商不但可以不使用任何材料设计并“构造”出他们的产品，还可以通过连接拥有电脑辅助建造（CAM）系统的制造机械来使用这些3D模型。但对我们大多数人来说，3D图形技术给娱乐产业带来的冲击最大，包括电影和游戏，正因为如此，我们许多人都对3D图形相关的技术和术语有所了解。

记住不是所有的渲染系统都有着相同的目标。对于离线渲染系统，像CAD程序中所使用的，精确度比帧速要重要得多。例如，这种模型有可能用来制造飞机部件。实时渲染器，像游戏引擎和模拟器，趋向于强调固定的帧速来得到平滑流畅的动画效果，为了这一目的宁愿牺牲掉图形和纹理的细节。

有些渲染器是混合型的，比如电影《玩具总动员》所使用的。艺术家和程序员们使用Pixar的Renderman技术来创造眩目的视觉场景，但动画的每一帧在服务器场——一个计算机集群，渲染工作可以在其中分布式进行——上要耗费数小时进行渲染。这些离线渲染的帧之后被排成标准电影的每秒24帧的序列，来制作电影的最终剪辑。

随着急速增长的对3D芯片渲染能力的需求，“消费级3D”和“工作站级3D”之间的界线已经非常模糊了。然而，实时游戏引擎仍然做了许多折衷来保持帧速，一些甚至设计了“油门”来控制当帧速降低到规定的水平之下时自动打开和关闭某些特性。相比之下，工作站级3D需要一些当今游戏不需要的高级特性。

3D图形领域广大而复杂。我们的目标是写出一系列相当技术性的，但通俗易懂的，有关3D图形技术的文章。我们从用来创建3D图形的，被称作3D管线的多步处理流程开始。我们会遍历整个3D管线，从场景中一个三角形开始，到最终一个像素被画出。我们会提到一些与渲染3D场景相关的数学，尽管对3D算法只是做简单的介绍（如果你想深入学习，在本文最后我们列出了相当数量的参考）。

在管线中，准备就绪

因为3D图形渲染本身的有序特性，因为有如此多的计算要做，大量的数据要处理，整个处理过程被拆分成不同的步骤，有时被称作阶段（Stage）。这些阶段被依次送入前面提到的3D图形管线中。

创建场景所需的巨大工作量使得3D渲染系统的设计者们（包括硬件和软件）寻找一切可能的方法来去除不必要的工作。有设计师这么讽刺过，“3D图形学是欺骗而不被抓住的艺术”解释一下，这句话的意思是说，3D图形学中的一种艺术形式就是优雅地通过降低场景中的显示细节来获得更好的性能，但却不让观察者注意到显示质量上的损失。处理器和内存带宽是宝贵的资源，因此设计师为节约它们所做的任何努力都会对性能非常有利。一个重要的例子就是拣选，它用来告诉渲染器，“如果观察摄像机（观察者的眼睛）看不到它，别自找麻烦去处理它，只操心摄像机能看到的东西吧。”

伴随着相关处理步骤的数量和复杂度，这些阶段（Stage）在管线中的次序可以在执行时改变。之后我们很快会更加详细地检阅这些阶段中所做的操作，概括地说，一个常规的3D管线顺序拆分为四个片段：应用/场景，几何图元，三角形设置和光栅化/渲染。虽然下面的片段草图可能看起来比较吓人，当你读完这篇文章时，你会成为极少数真正理解3D图形工作原理的人中的一员，我们认为你将会想要理解得更加深入。

操作在哪里完成

3D世界的大多数高层次方面操作由管线中应用阶段部分（有争论认为它技术上不属于3D管线的一部分）的应用软件负责管理，余下的三个主要阶段通常由一套应用程序接口（API）负责管理，例如SGI的OpenGL，微软的Direct3D，或Pixar的Renderman。API通过调用图形驱动程序和硬件来在硬件中执行绝大多数的图形操作。

图形API实际上是为应用提供了硬件抽象，反过来说，为应用提供了真正的设备无关性。因而，这些API通常被称作硬件抽象层（HALs）。它们的设计目标非常简明——应用开发者一旦为某个API写出了程序，这个程序就可以（而且应该）运行在任何支持这个API的硬件上。相反的，硬件制造者为这些API编写驱动程序，这样为这些API写的应用就可以在它们的硬件上运行了（图1）。说明一下，添加“应该”这个词是因为有些时候因为兼容性问题会导致API的不正确使用（被称作违规），这会导致应用依赖于某个特定的硬件特性，或者导致在某个硬件驱动下API特性被错误地执行，最终产生了错误的或不可预知的结果。

空间入侵者

深入管线细节之前，我们首先要从高层了解3D物体和3D世界是如何定义，物体如何被定义，放置，定位，如何在更大的3D空间内，或者就在它们自己的边界内进行控制。在一个3D渲染系统中，多个笛卡尔坐标系（x－（左/右），y－（上/下），z－（远/近））被应用在管线的不同阶段。被运用在互相关联但各不相同的目的的同时，每个坐标系都提供了精确的数学方法来在空间中定位和描述物体。毫无意外的，每个这样的坐标系都被称作“空间”。

3D场景中的物体和场景本身在经过3D管线时被连续地进行转换或者变换，一共要通过五个空间。下面是这些空间的简单概述：

模型空间（Model Space）：模型在它们自己的坐标系中，原点是模型上的某个点，比如在一个英式足球运动员模型的右脚上。而且，模型有一个控制点或者“把手”。用来移动模型，3D渲染器只需要移动控制点，因为模型空间中模型的坐标与它的控制点保持固定的关联关系。此外，同样的“把手”也可以用来旋转物体。

世界空间（World Space）：在这里模型被放置在实际的3D世界中，使用一个统一的世界坐标系。事实上许多3D程序跳过了世界空间而直接转到了裁剪空间或视图空间。OpenGL中并不真正有世界空间这个概念。

视图空间（View Space - 也被称作摄像机空间 Camera Space）：这个空间中，当前观察摄像机被程序定位在3D世界坐标的某个点上（通过图形API）。世界坐标系被执行变换（使用矩阵数学，我们稍后会探讨），从而使摄像机（你的眼睛）处在坐标系的原点，沿着z轴朝向场景。如果世界空间的变换被跳过了，场景就被直接变换到视图空间，摄像机同样被放在原点沿着z轴方向。沿着z轴远离摄像机深入场景时z坐标的值是增加还是减少由程序员决定的，但我们现假设你沿着z轴看过去的坐标是增加的。注意拣选，背面剔除和光照操作是在视图空间进行的。

视图体实际上由投影（Projection）来创建的，就像名字所暗示的那样，“投影场景”到摄像机的前面。从这个意义上来说，这是种角色倒转，摄像机现在变成了放映机，场景的视图体通过关联摄像机进行定义。把摄像机想象成某种全息放映机，但它不是把3D图像放映到空气中，而是把场景投影“进”你的显示器。这个视图体的形状可以是矩形（称作平行投影）也可以是棱锥形（称作透视投影），后者被称作平截视图体（View Frustum）（通常也叫做视图体（Frustum），虽然视图体这个名字更常用）。

视图体定义了摄像机可以看到的部分，同样重要的是，它也定义了摄像机看不到的部分，这样一来，许多物体模型和世界的某些部分都可以被丢弃，以节约3D芯片的运算周期和内存带宽。

视图体看起来像是个顶部被切掉的棱锥。棱锥的顶部紧贴摄像机的视点并向外发散。视图体的顶部被称作近（前）截面，另一面被称作远（后）截面。整个被渲染的3D场景必须处在近截面和远截面之间，同时被视图体的侧面和顶部限制。如果模型中的三角形（或者世界的一部分）超出了视图体，它们就不会被处理。同样的，如果一个三角形有一部分在视图体里面一部分在外面，超出的部分会被视图体截掉，因此这里才会使用“裁剪”（Clipping）这个术语。尽管视图空间中的视图体有裁剪面，裁剪的实际操作是在视图体变换到裁剪空间时执行的。 

深入空间

裁剪空间（Clip Space）：与视图空间相似，但是视图体被“压扁”成了一个单位立方体，x和y坐标被规格化到了－1到1之间，z坐标在0到1之间，这可以简化裁剪计算。“透视分割”执行规格化操作，通过用一个特殊的“w”值除所有的x，y和z顶点坐标，这个值就是我们后面将会详细说明的缩放因子。透视分割使近处的物体变大，远处的物体变小，跟你所期望看到的真实场景一样。

屏幕空间（Screen Space）：在这里3D图像被转换为x和y的二维屏幕坐标来做二维显示。注意z和w坐标依然被图形系统保留，用于最终渲染之前的深度/Z缓存（参见下面的Z缓存一节）和背面剔除中。注意场景到像素的转换，也就是光栅化的操作，还没有开始。

因为这些不同空间之间的变换绝大多数实质上都是改变参照系，很容易混淆。3D管线容易把人搞晕的一部分原因就是没有一个“确定的”路线来执行所有这些操作，因为研究人员和程序员们各自发现了一些有用的技巧和优化方法，而且通常都会有多个方法可以解决一个给定的3D/数学问题。但是，通常空间变换的处理步骤都按照我们前面介绍的顺序来进行。

要对这些不同空间之间如何相互影响有个概念，考虑一下下面这个例子：

拿几块乐高玩具，把它们拼在一起做个模型。想象一下把单独的块认作物体的边缘，块与块的连接部分看作顶点（虽然乐高建筑并不使用3D模型常用的三角形图元，但我们的例子用四边形也很合适）。把这个物体放在你面前，模型空间的原点坐标应该是左下方离你最近的那个角，模型的所有坐标都由这个点来衡量。原点实际上可以是模型的任意一部分，但左下方最近的角是最常用的。当你在房间里（3D世界空间或者视图空间，由3D系统决定）移动这个物体，块与块之间的相对位置是固定不变的（模型空间），虽然它们相对房间的坐标在变化（世界空间或视图空间）。

3D管线数据流

某种意义上来说，3D芯片就是物理具体化的3D管线，数据在这里从一个阶段（Stage）“顺流”到另一个阶段。有一处需要注意，管线中的大多数应用/场景阶段和早期的图元阶段的操作是对每顶点进行的，然而拣选和裁剪是对每三角形进行的，渲染操作是对每像素进行的。为提高性能，管线中不同阶段的计算可以重叠。例如，顶点和像素操作在Direct3D和OpenGL中都相互独立，所以可以做到一个三角形在图元阶段时，另一个在光栅化阶段。而且，图元阶段对两个或多个顶点的计算和光栅化阶段对两个或多个顶点的计算（来自相同的三角形）可以同时执行。

管线的另一个优势是，因为在图元阶段不会有数据在顶点间传递，渲染阶段像素间也没有数据传递，芯片制造者可以实现多个像素管线，通过并行处理这些独立实体来获得可观的性能提升。还有需要注意的一处是实时渲染中管线的使用，尽管有许多好处，也不是没有缺点。举个例子，一旦一个三角形被送入管线，程序员几乎就跟它挥手道别了。要获取管线中顶点的状态或者颜色/透明度信息要付出非常高的性能代价，还可能导致管道阻塞，这是绝对不该做的事。 

管线阶段——深入探讨

1. 应用/场景

3D应用程序自身可以认作是3D管线的开始，尽管它并不真的是图形子系统的一部分，但却是由它来启动图形生成处理以生成最终的场景或者动画帧。应用程序还设置观察摄像机的位置，也就是你在3D世界中的“眼睛”。物体，包括动的和不动的首先在应用程序中以几何图元或者基本的构造块来描述。其中三角形是最常用的图元。它们简单易用因为三个顶点恰好描述一个平面，但四个或更多顶点的多边形不一定位于同一个平面上。更复杂的系统支持被称作高次表面，它们是不同类型的曲面图元，这些我们很快会讲到。

3D世界和其中的物体是在程序中创建的，像3D Studio Max，Maya，AutoDesk 3D Studio，Lightwave和Softimage我们仅举这几个例子。3D艺术家们通过这些程序不但可以创建模型，还可以让它们动起来。模型首先用大量的三角形构建，然后进行着色和贴纹理。接下来，依赖于渲染引擎的约束——离线的或者实时的——艺术家可以降低这些高精度模型的三角形数量来适合给定的性能限制。

应用程序控制物体从一帧移动到另一帧，无论是离线渲染器还是游戏引擎。应用程序遍历几何数据库收集必要的物体信息（几何数据库包含了构成物体的所有几何图元），移动所有下一帧动画中要变化的物体。以一个游戏引擎为例，渲染器不会完成所有的工作。游戏引擎同样必须处理AI（人工智能），碰撞检测和物理特性，声音，以及网络（如果游戏在网络多人模式下进行）。

所有的模型都有一个默认的“姿势”，比如人物模型，默认姿势是所谓的“达芬奇姿势”，因为这个姿势很像达芬奇著名的“维特鲁威人”。一旦应用程序指定了模型的新“姿势”，模型就准备好了下一步处理。

一些应用程序会在这里执行一个操作，叫做“遮挡剔除”，可见测试测定物体是部分还是全部被它前方的其他物体遮挡（盖住）。如果被挡住了，被挡住的物体，或者物体被挡住的部分会被丢弃。节省下的计算代价值得考虑，否则这些计算要在管线中执行，尤其是有着复杂深度的场景，也就是处在场景后面的物体有多“层”物体在它们前面，在观察摄像机前挡住了它们。

如果这些被遮挡的物体可以提早被剔除，它们就不必在管道中继续前进，这就节省了不必要的光照、着色和纹理计算。例如，在一个你跟哥斯拉对抗的游戏中，那个大家伙藏在你正走向的一幢大楼后面，你看不到他（卑鄙的家伙）。这时游戏引擎不必绘制哥斯拉的模型，因为大楼的模型挡在了他的前面，这就可以节约下硬件在这一帧动画中渲染哥斯拉模型的消耗。

一个更重要的步骤是对每个物体的一个简单的可见检查。这可以通过检查对象是否在视图体中（全部或者部分）来完成。一些引擎还尝试测量视图体中的一个物体是否完全被另一个物体挡住了。这些操作典型地使用简单的概念如入口（Portal）和可见集（Visibility Sets）来完成，特别是室内场景。这是在3D游戏引擎中实现的两种简单的技术，使引擎不必再绘制3D世界在摄像机中看不到的部分。[Eberly, p. 413]最初Quake中使用的是称作潜在可视集（PVS）的技术，它把世界划分为小块。本质上就是，如果玩家处在世界的一个特定部分，看不到其他区域时，游戏引擎就不必处理其他部分的数据。

另一个程序员们喜欢的降低工作量的技巧是使用绑定盒（Bounding Box）。例如你有个10000个三角面的杀手兔模型，与其测试模型的每个三角形，程序员可以把模型用一个绑定盒包住，绑定盒由12个三角形组成（六面体的每个面两个三角形）。然后就可以测试剔除条件（基于绑定盒的顶点而不是兔子模型的顶点）来确定杀手兔在场景中是否可见。在你通过指定杀手兔模型中的共享顶点（相邻三角形可以共享的顶点，我们后面会详细探究的一个概念）来进一步减少顶点数之前，针对于这个测试你已经把总顶点数从30000（杀手兔模型）个减少到了36个（绑定盒）。如果检测表明绑定盒在场景中不可见，杀手兔模型就可以简单地被丢弃，你就为自己省了一大堆工作。

你LOD了没有?

另一个消除额外工作的方法就是所谓的物体细节等级（Level of Detail），被称为LOD。这项技术是有损的，但对于它的一般应用来说，损失的模型细节通常是觉察不到的。物体模型由数个不同的细节等级构造。很恰当的例子是一个最高细节等级的战斗机模型使用10000个三角形，附带的低精度细节等级分别由5000，2500，1000和500个三角形组成。具体使用哪一个细节等级由战斗机距离观察摄像机的距离决定。如果很近，就使用最高的细节等级，如果是刚刚能在摄像机中看到而已，就使用最低的细节等级，在这两种情况之间，就使用其它的细节等级。

细节等级的选择总是由应用程序在将物体送入管线做进一步处理之前完成。为了决定使用哪一个细节等级，应用程序把物体的一个简化版本（通常只是中心点）映射到视图空间，以测定到物体的距离。这项操作独立于管线执行。必须确定具体的细节等级以决定将哪个三角形的集合（不同细节等级）送入管线。

几何专用技巧

一般来说，三角形多的模型看起来更加真实。这些三角形的信息——它们在3D世界中的位置，颜色等——保存在每个三角形的顶点描述中。这些3D世界中的顶点集合被称作场景数据库，跟上面提到的把动物模型做为几何数据库非常相像。模型中的弯曲部分，比如汽车上的轮子，需要许多三角形来近似形成一个光滑曲面。在一个圆形中努力减少顶点/三角形数量会造成不利影响，例如，使用低细节等级将造成一个“崎岖不平”的圆，构成圆的三角形顶点都可以看到。如果用更多的三角形来表现这个圆，它的边缘看起来会平滑得多。我们可以进行优化来减少实际送入管线的三角形数量却不必降低模型细节，因为相连的三角形顶点是共享的。程序员可以使用连接的三角形绘制模式来降低顶点数，即三角带和扇形。例如：

在三角带模式下，最简单的例子就是由两个三角形拼成的矩形，它拥有一条共享的斜边。通常，单独绘制两个这样的三角形会产生六个顶点。但是，由于两个三角形连在一起，它们形成了一个简单的，由四个顶点描述的三角带，把平均每个三角形需要的顶点数减少到了两个，优于原先的三个。看起来减少得并不多，随着三角形数目的增多（顶点数也同样变化）优势也会愈加明显，平均每个三角形单独拥有的顶点数降低到了一个。[RTR, p. 234]以下是计算平均顶点数的公式，给定m个三角形：

1＋2m

因此，在一个有100个三角形的三角带中，平均每个三角形顶点数是1.02个，或者说总共有102个顶点，相比独立三角形的300个顶点是相当可观的节约。在这个例子中，我们通过把m个三角形改用三角带达到最大限度节约了成本，一共是m+2个顶点。这些节约可以积少成多，当考虑Direct3D中使用32个字节的数据来描述一个顶点的属性（如位置，颜色，透明度等）。当然，整个场景不可能只由三角带和扇形组成，但为了相应节约的成本，开发人员会尽量使用它们。

在扇形情况下，程序员可能使用20个三角形排列在一个扇形区来描述一个半圆。正常情况下由60个顶点组成，但通过使用扇形来描述，顶点数量可以降低到22个。第一个三角形有三个顶点，但接下来每个新增的三角形只需要增加一个顶点，扇形的中心有一个所有三角形共享的顶点。同样达到了使用三角带/扇形最大限度的节约。

使用三角带和扇形的另一大优势是，它们是“无损”的数据压缩，这意味着并没有任何信息和图形精度为了数据压缩和速度提升而损失掉。此外，以三角带和扇形向硬件传送三角形可以提高顶点缓存的效率，这可以加速几何处理的性能。另一个程序员可以使用的工具是索引过的三角形列表，可以用来描述巨量的三角形，m个三角形，使用m/2个顶点，大约是使用三角带和扇形压缩量的两倍。这个代表性的方法是大多数硬件架构的首选方法。

曲面简介

与其使用大量三角形来表现一个曲面，3D艺术家和程序员还可以使用另一个工具：高次曲面。这些曲面图元有着更为复杂的数学描述，但在一些情况下，这些额外的复杂性仍然比用大量三角形来描述物体更加廉价。这些图元有一些相当古怪的名字：参数多项式（称为样条），非均匀有理B样条（NURBs），贝塞尔曲线（Bezier），参数双三次曲面和N-Patches。因为3D硬件对三角形理解得最好，这些在应用层定义的曲面会被栅格化，或者被转换为三角形，转换由API运行时，显卡驱动或者硬件执行，以通过3D管线做进一步处理。如果曲面从CPU送入3D图形卡做变换和光照处理时由硬件执行栅格化，性能还有可能进一步提升，但这会给AGP接口带来少量负载，是一个潜在的瓶颈。 

2. 几何处理

继续前进：四种主要变换

物体在帧与帧之间变化位置来产生运动的假象，在3D世界中，物体通过四种操作被移动和操作，统称为变换。变换实际上是把不同类型的“变换矩阵”以矩阵数学作用在物体顶点上。这些变换操作都属于仿射几何（Affine），意味着它们发生在仿射空间中——一个包含点和向量的数学空间。仿射变换保留了线的平行关系，但点与点之间的距离可以变化。（看下面的例子，显示了一个正方体变成了一个长方体，边与边的平行关系被保留下来，但物体内的角度发生了变化？）。当物体在一个特定的坐标系或空间中移动，或者从一个空间转到另一个空间时使用这些变换操作。

平移：物体沿着三个坐标轴的任意一个到另一个位置的移动。数学操作：通常是加法或减法（加一个负数），不过为了提高效率做了一些转换，所以这项操作通过矩阵乘法来完成，跟旋转和缩放操作一样。

旋转：就像名字暗示的那样，一个物体可以沿任意的轴旋转。数学操作：最简单的旋转例子就是物体在坐标系的原点，顶点的每个坐标值乘上θ角（物体旋转的角度）的sin或cos值就得到了旋转后的坐标。如果一个物体要同时绕几个坐标轴旋转，旋转的计算顺序就非常重要，不同的顺序会得到不同的结果。绕任意轴旋转需要一些额外的工作。可能首先需要进行一个变换移动到原点，接着做一些旋转操作使旋转轴对齐坐标系的z轴。然后做想要的旋转，然后对齐z轴的操作要被撤销，然后把物体移回原位。

缩放：模型的大小变化，在透视投影（我们很快会详细讨论的一种变换）中用来产生场景深度效果。数学操作：乘一个缩放因子，如每个坐标乘2，物体会大一倍。缩放可以被归一化，这样三个轴向的缩放比例相同，或者每个顶点做不同程度的缩放。负的缩放因子会产生物体的镜像。

斜切：（又称错位变换）沿着一个或多个轴向操作使模型的形状产生变化。例如一盒方形果冻盛在一个盘子里放在桌上，把盘子的一边提起成45度，果冻因为重力会变成偏菱形。果冻模型的顶部会向着3D世界的地面歪斜。数学操作：把一个坐标值的函数加在另一个上，比如把x的值加在y上而x不变。

请看下图：

就像前面所讲，3D变换计算大量使用矩阵数学来描述。矩阵为变换条件提供了简便的表示，3D矩阵数学通常是些简单的乘法和加法。

变换处理的效率来自于以下事实：多次矩阵操作可以连接组成一个单独的矩阵，把这个矩阵应用在顶点上作为一次单独的矩阵操作。这就把矩阵操作的设置消耗分散到了整个场景中。有人可能会认为要给出使用笛卡尔坐标系的各种空间的三个坐标值，应该是个3x3的矩阵。然而这里用的是“齐次坐标”，是个4x4矩阵。使用齐次坐标可以把需要加法的变换用乘法来处理，比如平移。多个不同变换也可以通过齐次坐标连接为乘法运算。第四项实际上就是缩放因子“w”。最初设置为1，用来在裁剪空间中做投影变换时计算深度值，并且在光栅化阶段作为像素值的透视修正插值。

从空间到空间

继续进入到几何图元部分，我们很可能把物体从模型空间变换到世界空间，然后从世界空间到视图空间，或者有些时候直接变换到视图空间，我们前面提到过。从一个坐标空间转换到另一个时，要用到许多基本的变换。有些可能像一个翻转变换一样简单，也有复杂得多的，比如包括两个平移和一个旋转的组合。举个例子，世界空间变换到视图空间通常包括一个平移和一个旋转。转换到视图空间之后，许多有趣的事情就开始发生了。

第一部分就讲到这里。在下一部分我们将概括几何图元部分，并且涉及光照，裁剪，三角形设置以及渲染相关的许多方面。

var n1:Number3D = new Number3D(500, 0, 0);

var n2:Number3D = new Number3D(0, 0, 500);

var distance:Number = Number3D.sub(n1, n2).modulo;

Papervision3D仍然处理2.0 alpha阶段，在测试这些例子之前，确保更新到了Papervision3D 2.0 alpha Great White branch的最新版本。

原文地址：http://www.insideria.com/2008/05/textures-wireframe-bitmap-movi-1.html

Materials
关于Papervision3D的材质你需要知道些什么呢？以一个球体为例，你怎样确定这个球体是地球呢，还是眼睛或篮球？你只能通过贴在球体上面的材质来判断。
这篇文章介绍了Papervision3D材质的基本内容并且教会你怎样把材质加到一个平面上。让我们开始吧。

材质的基类
在单独介绍每种材质之前，需要着重了解每种材质都扩展了的抽象父类“MaterialObject3D” (org.papervision3d.core.proto.MaterialObject3D)。也就是说，无论哪种材质，你都可以找到以下共同的属性。

所有的材质都很常用的
1. name(String):材质的名称。
2. interactive(Boolean)允许指定监听器。
3. oneSide或doubleSided(Boolean)：在网格（即3D物体）的正面和反面贴上材质。例如，一个转动的平面在它的两面都显示相同的材质。
4. smooth(Boolean)：在材质上应用平滑算法。把材质或者高分辨率的材质的平滑打开，会增强它的表现效果。

较少用到，但很有用的
5. bitmap(BitmapData)：允许你访问材质的bitmap data。
6. tiled(Boolean)：决定纹理是否平铺在整个材质上。对于原始对象，需要调整maxU 和maxV才能生效。关于UV映射的更多信息请访问：http://en.wikipedia.org/wiki/UV_mapping/
7. maxU (Number):“U”最大值。
8. maxV (Number):“V”的最大值。
9. scene (Scene3D):持有物体所属舞台的引用。

特别情况下使用的
10. invisible(Boolean)：表明物体表明是否被绘制。
11. opposite(Boolean)：indicates whether the face is flipped. Only use this if the material is double sided.
12. widthOffset (Number): holds the original width of the bitmap before auto mip-mapping resizes
13. heightOffset (Number): holds the original height of the bitmap before auto mip-mapping resizes

Wireframe Material（或者包含了Wireframe Material的组合材质）
14. lineColor (Number):表面线条的RGB值（如0xabc123）。
15. lineAlpha (Number):０到１之间的数值，代表了线条的透明度。
16. lineThickness (Number)：线条厚度。

仅适用于Color Material（或者包含了Color Material的组合材质）
1. fillColor (Number):填充网格的RGB值（如0xabc123）。
2. fillAlpha (Number):0到１之间的数值，填充的透明度。

1. Wireframe

WireframeMaterial( color:Number=0xFF00FF, alpha:Number=100, thickness:Number = 0 )

2.Color

ColorMaterial( color:Number=0xFF00FF, alpha:Number = 1, interactive:Boolean = false )

3.Bitmap
如果想要将图像应用到3D物体上，你需要用到下面的方法来得到.gif、.jpeg或者.png文件的bitmap数据。

在这个例子里用到上面这幅logo。Bitmap Material, Bitmap Asset Material, 和 Bitmap File Material是三种不同的方式，得到相同下面相同的效果。

a.Bitmap

Bitmap Material允许将任何BitmapData贴到材质上。最典型的用法是绑定一个位图，从而获取它的bitmapData再应用到材质上。你可以从这 里获得关于在Flex中绑定位图的更多信息：http://livedocs.adobe.com/flex/3/html /help.html?content=embed_3.html
BitmapMaterial( asset:BitmapData=null, precise:Boolean = false)

b.Asset(仅在Flash CS3使用)

使用Bitmap Asset Materials将Flash库里的一幅位图贴到物体上。仅需要增加任何位图到library里，右键单击->属性

c. Color

Bitmap Color Material的用法跟Color Material差不多，但它允许你访问bitmapData，按照自己的意愿绘制或改变颜色的像素。

d.File

Bitmap File Material仅需要一个字符串，指出图片的位置。你可以为材质增加监听器，来监听图片下载进度或什么时候完成下载。
BitmapFileMaterial( url :String=”" )

e.Viewport

Bitmap Viewport Material获取一幅视口位图的快照，并允许你把它应用到其它的3D物体上。类似于篮球比赛，通过大屏幕而不是直接观看。
BitmapViewportMaterial(bitmapViewport:BitmapViewport3D,precise:Boolean=false); BitmapViewport3D(viewportWidth:Number=640,viewportHeight:Number=480, autoScaleToStage:Boolean = false, bitmapTransparent:Boolean=false, bgColor:int=0×000000, interactive:Boolean=false, autoCulling:Boolean=true);

f.Wireframe

Bitmap Wireframe Material类似于Wireframe Material，但允许访问材质的bitmapData。
BitmapWireframeMaterial(color:Number=0xFF00FF, alpha:Number=1,thickness:Number=3)

4.MovieClip
Papervision3D允许你直接使用Flash库里的MovieClip，通过链接标识符(linkage identifier)贴到3D物体上。对于Flex，就需要绑定公开的.swf和MovieClip。
a.Asset (仅用于Flash CS3)
MovieAssetMaterial( linkageID:String=”", transparent:Boolean=false, animated:Boolean=false, createUnique:Boolean=false, precise:Boolean = false)
b.MovieMaterial
MovieMaterial( movieAsset:DisplayObject=null, transparent:Boolean=false, animated:Boolean=false, precise:Boolean = false )

5. Video Stream

嗯，你可以在3D物体上显示视频了。真酷！

VideoStreamMaterial ( video:Video, stream:NetStream , precise:Boolean = false )

6.Shade
阴影材质是基于光线的，一束光照射在材质上，反射与否就形成了阴影。你可能已经猜到了，你首先需要创造一束光：
light = new PointLight3D();
通过x、y和z属性，你可以把这束光移动到你想要的位置。阴影物体会朝向这束光。如果你想这束光可见，需要传递一个为“true”的参数，并把它“addChild”到舞台上。否则，它就是一束不可见的光，在同样的位置上创建3D物体，看起来光源就像是太阳或灯那样。
a.cell

http://en.wikipedia.org/wiki/Cel-shaded_animation
Cell Material用到了两种颜色，你可以设置步数来混合它们。

CellMaterial(light:LightObject3D, color_1:int, color_2:int, steps:int)

b.Environment Map

http://en.wikipedia.org/wiki/Environment_map
environment map接受投影过的位图。下一篇文章里会提到需要“shaders”的environment map的更多高级用法。

EnvMapMaterial(light:LightObject3D, lightMap:BitmapData, backEnvMap:BitmapData=null, ambientColor:int = 0)

c. Flat Shade

http://en.wikipedia.org/wiki/Flat_shading

平面阴影使多边形的每一面都有固体阴影。这个效果用在球体上会比在平面或立方体上更好。你会看见光线环绕着这个球体。

FlatShadeMaterial(light:LightObject3D, diffuse:uint=0xffffff, ambient:uint=0×000000)

d.Gouraud

http://en.wikipedia.org/wiki/Gouraud_shading
Gouraud Material具有更平滑的阴影。上面的链接讨论了它的局限性。

GouraudMaterial(light3D:LightObject3D, lightColor:int = 0xFFFFFF, ambientColor:int=0×000000)

e. Phong

http://en.wikipedia.org/wiki/Phong_shading
Phong Material跟Gouraud Material类似，不过它允许高光。

PhongMaterial(light3D:LightObject3D, lightColor:int, ambientColor:int, specular:int)

7.Composite

composite material就是多种材质组合到一起变成了一种材质。在这里我们看到的是bitmap material和wireframe material混在一起的效果。

8.运行时材质交换

在运行时(run-time)交换材质将很容易办到。感谢Ralph的更新。
my3DObject.material = myMaterial;
最用使用是在翻转的时候，但Papervision3D的交互要在接下来的文章里才会介绍。

9.网络上Material的例子

http://www.zeropointnine.com/blog/a-papervision-20-alpha-example
http://www.unitzeroone.com/blog/2008/03/12/papervision3d-shaders-bumpmap-example-sourcecode-for-cs3/

标签： Material, Papervision 3D, 纹理

我们第一篇的小球在这里不是特别能明显表示下面的区别。所以我们这次用个立方体Cube。

原理介绍：

先记下上面这个图，它保证我们不迷失在三维的世界里，如果你正好是maya,3dsmax的使用，恭喜你！和里面的道理一模一样。

移动：
cube.x  //物体在世界坐标的X轴位置
cube.y  //物体在世界坐标的Y轴位置
cube.z  //物体在世界坐标的Z轴位置
pv3d的三维坐标 图1

cube.moveForward（一定距离） //向物体本地Z的正方向移动
cube.moveBackward（一定距离） //向物体本地Z的负方向移动
cube.moveDown（一定距离）//向物体本地Y的负方向移动
cube.moveUp（一定距离）//向物体本地Y的正方向移动
cube.moveLeft（一定距离）//向物体本地X的负方向移动
cube.moveRight（一定距离）////向物体本地X的正方向移动

这两种有什么区别呢？其实就是world和local坐标系的区别，上面那张图应该能帮助您理解。

旋转：
cube.rotationX  //物体绕世界坐标的X轴，顺时针旋转
cube.rotationY  //物体绕世界坐标的Y轴，顺时针旋转
cube.rotationZ  //物体绕世界坐标的Z轴，顺时针旋转

cube.yaw(一定角度)  //以本地的Y为轴心，顺时针旋转
cube.pitch(一定角度)  //以本地的X为轴心，顺时针旋转
cube.roll(一定角度)  //以本地的Z为轴心，顺时针旋转
（yaw-pitch-roll其实是欧拉角euler的一种描述方法，愿意研究图形数学可以到网上百科查询具体含义，我们flash3d研究所以后也会在图形学原理里放出关于三种旋转方式和万向节锁gimbal-lock的相关资料）

这两种有什么区别呢？还是自己尝试尝试吧~不要放弃任何一种哦，都是每天都会用到的东西。

缩放：（默认下，单位为1，2，3…倍这种，不是百分比）
cube.scaleX  //物体延X轴放大
cube.scaleY  //物体延Y轴放大
cube.scaleZ  //物体延Z轴放大
这是分别延x,y,z的缩放，如果要整体缩放，直接用下面这个就可以了。
cube.scale  //物体整体放大

代码流程：
仍然有困难写出代码的朋友，可以 下载源代码 。

和上次一样，建包，放傻瓜包，然后初始化最基础的4要素。不想重新来一次的可以就修改上次的^_^。如果不记得了可以看 《第一篇 人人都能PV3D》—点击到第一篇
我们这次要添加一个cube（立方体）。

cube=new Cube(new MaterialsList({all:new BitmapFileMaterial('map.jpg')}),500,500,500,3,3,3);
介绍一下生成立方体的构造器，和我们第一篇的球体少许不同。
第一个参数需要一个‘材质列表’（MaterialsList），而不是像我们上次小球只要单个材质。（不理解材质列表暂时没关系，其实它就是一个很多单个材质添加在一起的‘数组’或object。我们以后会在中级研究中作一些具体分析）
参数二，参数三，参数四分别是立方体的宽，长，高。
参数五，参数六，参数七分别是决定长宽高有多少段（段数越多运行越慢，但是贴图变形越小，越准确）。

因为需要用‘材质列表’（MaterialsList），所以开始要记得把MaterialsList类导入进来。
import org.papervision3d.materials.utils.MaterialsList;
当然，也得把立方体的类导入
import org.papervision3d.objects.primitives.Cube;

为了能更清楚的测试这些控制的含义，我在初始化的时候先给立方体了一个角度。
cube.rotationX=30;
cube.rotationY=30;

enterframe里面就可以测试我们学到的各种操作了。
属性需要这样写才能累加，才能看到动画变化：
cube.x+=10;
方法直接写就可以了：
cube.MoveForward(10);

 这次的也非常简单吧，记住它们，熟悉它们，因为我们每天都会用到。
好好练习哦~加油！
有任何不清楚的地方，欢迎到讨论区发言。（无需注册）

DDM君
Flab3D.com

Flash3d研究所推荐的Pv3d傻瓜包下载
源文件下载

  我们都会以flash中的使用为初级教程的软件，flex暂不多提，flex的使用者解决这类简单的安装问题应该是不成问题的）

     详细的参数就不再一一解释，你只要记住它的用法比照Flash CS3中的MouseEvent类使用，这里简单提供在Flash CS3帧上的测试代码(使用前不要忘了要import包类)： 

     注意观察输出面板相关的信息！

    基本3D交互场景事件实例：

    本实例是场景中有一个旋转的平面Plane，正反面都有贴图，当用鼠标移上或移开时交换显示不同的图片，点击该平面时向相反方向旋转。在代码中，我预先创 建一个3D对象Plane平面，并使用两张不同的图片来做材质贴图，然后使用InteractiveScene3DEvent来驱动鼠标事件。效果图示如 下：

    具体代码如下：

鼠标未点击时不断旋转的立方体效果

鼠标点击时缓动放大效果

   效果代码如下：

    代码比较长，关键处已加以说明~！

    这段代码依然是有关InteractiveScene3DEvent类的用法，由于立方体有6个面，为了显示每个面的不同，采用了6张图片做贴图；为了能让立方体的每个面都能实现鼠标交互，在init3d()函数中设置6个面的交互属性为true：

    由于要求有缓动效果，所以在帧频处理函数中通过默认相机的放大：

    缩小：

来达到效果。接着通过判断立方体的X、Y、Z三个方向的旋转进一步设定缓动放大缩小过程效果，从而达到高级3D场景交互事件效果的运用目的。

    总结：本节主要是关于高级3D场景交互事件用法，特别是在一些缓动算法上有一定的难度，通过平方根函数求两点之间的距离达到缓动放大、缩小的效果(这个我习惯称为逼近“定点距离缓动”)。

    本教程可自由转载，请注明转载出处，谢谢~！

    然后修改initPapervision函数，把原来默认的场景、相机、视图区更改为这三个类属性：

    用新的类成员变量重新渲染：

    2、新建3D键盘交互类：MainKeyboardInteraction

    在这类中我将使用Plane（平面类）加载外部图片贴图来实现3D键盘交互，并且设定使用键盘上的w、a、s、d这4个按键控制Plane的平移，旋转交互效果，代码如下：

    代码思路清晰，无非是用stage来侦听事件（键盘事件）~！最终效果截图如下：

    总结：实现Papervision3D键盘交互效果要注意对舞台的侦听事件的处理，当需要侦听键盘时不要忘了事先import键盘类，并同时override父类相关的函数。

   本教程可自由转载，请注明转载出处，谢谢~！

    代码解释：

    1、这段代码只比上一课代码中新增了一个distance属性，目的是确定相机在场景中的位置不至于和对象（cow乳牛）随鼠标移动相距过大；

    2、这段代码重新修改的函数processFrame中的代码，目的是为了实现场景中的3D模型随鼠标的位置变动不断变动，从而达到鼠标交互的目的。效果最终截图如下：

    本课最终源代码如下：

    总结：没有过多的语句就实现了3D中的鼠标交互效果，这个效果尽管很简单~！

    本教程可自由转载，请注明转载出处，谢谢~！

复杂模型这里指的是用第三方软件预先制作的模型，最常见的是用3DMAX软件绘制的模型，在Papervision3D中，能够使用这种模型的称之为 Collada（可拉大），实话说，我本人对3DMAX软件的建模功能并不是十分熟悉，如果想要快速达到这种建模目的，可以使用一款免费软 件：GoogleSketchUpFree，现从网上找到一款简体中文绿色版，下载地址：http://x.139.xdowns.com/085/Google%20SketchUp%206.chs.rar（附注册信息:

Name：www.xdowns.com

Serial Number：KA-290-30718084-MMM

Authorization Number：4314573-409430-4318663

这里简要介绍使用这种模型达到的效果：

这幅截图是使用Papervision3D生成的动画乳牛效果图，3D感十分强烈~！

想要达到这种效果，在Papervision3D中要用到一个新的类：Collada，它位于 org.papervision3d.objects.parsers包中，此外还要用到一个3D显示对象类DisplayObject3D,它位于 org.papervision3d.objects包中，我要定义的乳牛cow就是用这个类来存贮模型，因此必须先import这两个类,连同基类 PaperBase一共3个类：

 类import后，就要构造cow乳牛了，即：

cow定义完成后，接下来就是进行具体的初始化，这只需要override 父类PaperBase中的init3d()函数：

    测试一下即有相应的效果~！

    完整的代码如下：

    补充说明：Collada文件要放在MainColladaCow这个类同包下的collada文件夹中，一共有2个文件：cow.dae和cow.png素材下载点此。

    总结：本课学习了有关复杂模型在Papervision3D中的使用。一般地，使用复杂3D模型时必须要用到Collada类，再进行实例化，重新渲染3D场景即可实现效果~！

   本教程可自由转载，请注明转载出处，谢谢~！

    要实现在这个基础上把这个圆锥体表面加上一幅图的效果怎么做呢？这里就要用到一个Papervision3D中的一个贴图 类：BitmapFileMaterial，这是一个什么类？简单的说这个类是实现从外部加载图片，实现Papervision3D材质贴图的效果，其用 法很简单，其语法是：

    在实际使用中只需要先导入这个类，然后直接new BitmapFileMaterial("所加载的图片地址")即可。需要说明的是，加载的图片格式是jpg,png,bmp等。

    在第四课代码的基础上稍加变动，立即就有一个旋转贴图效果的圆锥体：

最终代码如下（注：你可以更换你喜欢的图片）：

    总结：本课学习了Papervision3D中贴图的使用，比较简单。如果你有兴趣，把第五课的内容稍加改动，看看有什么样的效果~！建议找一张地球的平面图(这里有一张http://photo.sina.com.cn/list/photo_src.php?type=orignal&pic_id=49b35d542b1dd25beab3d)来实现这个效果(提示:实现这个效果请参考球体函数原型中的参数说明)，以下是这个效果的最终截图，呵呵。。。

    本教程可自由转载，请注明转载出处，谢谢~！

图1. 与ColorMatrixFilter等同的矩阵

    红，绿，蓝通道的值由如下所示计算方法所决定：
    CODE:

   公式:

var fl:Numer = (viewport.height / 2) / Math.tan (camera.fov / 2 * (Math.PI / 180));

Papervision3D 2.0 Chrome Example + Source.

Related posts :

• Papervision3D : Cut any mesh into 2 new meshes. (source).
• Learn Papervision3D 2.0 : Workshop.
• Flash 8 Example:DisplacementSmoke Source
• Papervision3D Shaders / Bumpmap example sourcecode for CS3
• Speaking at OFLA2 today; come and join us.

   首先，需要引用Collada类，并将3D模型文件作为内嵌资源，嵌入到程序中： //... 
   import org.papervision3d.objects.Collada;
    //...  
   [SWF(width='400',height='400',backgroundColor='0xFFFFFF',frameRate='30')] 
  
   public class Main extends Sprite
   {
        //...
        // 注意Embed标签的source和mimeType值，source是模型文件的相对路径，mimeType一定不要搞错了。
        [Embed(source='Demo.dae', mimeType='application/octet-stream')]
        private static var DemoModel:Class; 
        //...
   }

   接着，我们需要在初始化3D场景的时候把模型一起初始化：
   //... 
   private function Init3D():void
   {
        var _materialList:Object = {Sketchy_Stone_Ashlar: new BitmapFileMaterial("demo2/Sketchy_Stone_Ashlar.jpg") };
 
        _displayObj = new Collada(XML(new DemoModel()), new MaterialsList(_materialList));
        _displayObj.x = 30;
         _displayObj.y = -60;
   }
   //...

   注意上面的_materialList中的Sketchy_Stone_Ashlar属性，这个属性一定要和Collada的模型文件中的材质贴图名称一样！
   否则什么也显示不出来，比如我的模型中的材质贴图信息如下：
   <library_materials>
      <material id="Sketchy_Stone_AshlarID" name="Sketchy_Stone_Ashlar">
         <instance_effect url="#Sketchy_Stone_Ashlar-effect"/>
      </material>
      <material id="BackColorID" name="BackColor">
         <instance_effect url="#BackColor-effect"/>
      </material>
      <material id="ForegroundColorID" name="ForegroundColor">
         <instance_effect url="#ForegroundColor-effect"/>
      </material>
   </library_materials>

   Sketchy_Stone_Ashlar对应的就是上面的name=”Sketchy_Stone_Ashlar”，我这里没有相应的设置 BackColor和ForegroundColor，因为这两个是SketchUp自动生成的，因为这两个材质贴图不影响我的模型的显示。
   如果你是用3Ds MAX你可以在设置材质贴图的时候设置这个名称，记得这个名称要符合命名规范，3Ds MAX自动给你生成的通常是不符合命名规范的，用起来会有些问题。
   其它的代码就和显示一个球体模型或者立方体模型一样了，大家参考以前的代码吧。
   
   如果你和我一样使用SketchUp的话，那请你再继续往下看…
   按我上面的步骤做，显示SketchUp导出的3D模型时是会出错的，运行时会报“无法访问空对象引用的属性或方法。”。需要对PV3D的代码做一处小修 改，来避免这个空引用异常。打开PV3D的Collada类的源文件，找到379行处的var len:Number = semVertices.length;，将它改为var len:Number = semVertices == null ? 0 : semVertices.length; 这样就可以了。

   显示效果如下：http://flex.unbe.cn/PV3D/Try08_SketchModeling/Main.swf

   PV3D对SkechUp导出的Collada模型似乎支持得不好，或者是SketchUp的Collada模型导出功能还不够完善，所以显示出来的效果和建模时的效果有些差别。
  

    完整项目文件：try08_sketchmodeling.rar

   dmh2002注：本文在原文基础上略有改变。
   原文地址：http://www.unbe.cn/blog/?p=385