影片创造了一整个星球的世界观，从场景、生物，再到外星人类和他们的语言，概念设计非常重要。很多观众都对潘多拉星球的各种景观感到新奇和惊叹，从幕后片看到创作团队找的灵感很多是来自中国的场景。

从特效层面来说，演员的运动捕捉和面部表情捕捉技术还算是以前见到过的。革命性的3D拍摄技术介绍出现在12’55”以后：

1. 虚拟相机（Virtual Camera）：这项实时追踪技术可以让拍摄人员通过操作真实的相机来拍摄CG世界。
2. 3D相机（3D Fusion）：能够同时拍摄2D和3D画面。更加小型化？这个应该是说他们的相机不是很笨重的器材，能够用手持拍摄，从而得到大型设备拍不到的更细节的图像。
3. Simul Camera：整合了前两种技术的系统，能够实时地在实拍画面里合成上CG元素，从而在拍摄的时候就能看到最终的效果。

Related Posts :

• 2008/07/09 -- 电影特效公司小全
• 2007/04/26 -- Digital Domain 2007 Reel
• 2007/04/10 -- Studio Daily
• 2009/12/08 -- Experiment #07: Papervision 3D Camera Rig
• 2009/10/17 -- Psyop Resources

2009年本站共发表博文63篇。迎来了36831位访客，产生了78994次pageview，分别比2008年上升了14.11%和23.83%。PR在3，4之间徘徊，对一个普通的技术型博客而言，成绩一般，但我也满足。自从delicious、twitter等各种便捷的分享渠道成熟以来，blog的更新比以前少了。但我还是坚持写：写些高质量的文章，多些想法和经验的分享，创造有价值的原创内容，这是我给自己这个小小博客的坚持。

2009年十大最受欢迎的文章：

1. 八个我最常用的AS3开源类库 (2009-08)
   这种引诱式标题的效果果然出色，这篇是我第一次用这种标题写博。当然文章的内容也融合我自己的归纳总结，价值还是很高的。
2. Experiment #06: Page Flip 3D (2009-08)
   Papervision3D试验系列里的访问量第一名，很多人是冲着这个效果来的吧。这一年里花了很多精力和业余时间来学习3D。在Evernote里存了很多学习心得和笔记。来年再整理分享出来吧。
3. Flash字体嵌入方法总结系列 (2009-06)
   这个话题内容比较多，所以用系列的方式来写，由浅入深。一边总结一边还开发了自己的第一个AIR工具，收获颇丰。
4. FLARToolKit Start Up Guide (2009-03)
   今年是AR技术爆发的一年，我的十大里面有三个位置都是和这个主题有关的。这篇是我初接触AR时整理的入门介绍文。两个月后我用AR开发了求婚卡片：
5. Making of AR Proposal (2009-05)
   5月前的一周，我一直埋头做的就是这个东西。终于在五一节把这件事情搞定了（劳动节宿命下的劳碌命……）。
6. Experiment #05: Rubik’s Cube (2009-04)
   这个魔方效果其实我年初为福特做的一个项目里面开发的，时过2个月才整理并发布出来。
7. Ge – Smart Grid (2009-02)
   这篇是GE网站的介绍文，是AR网站的商业应用先锋。至今还记得看到那个房子展开动画的震撼。就冲着这种先锋精神，我把今年FWA的票投给了它。
8. AS3 Data Structures For Game Developers (AS3DS) (2009-02)
   介绍了一个好用的类库。
9. Face Detection in Flash, Next Big Wave? (2009-03)
   介绍了面部识别类库，可惜至今还无缘上手尝试。
10. TweenMax is Updated (2009-02)
    介绍TweenMax的新闻类文章，后续还有过更新。但是现在版本11的正式版已经出来了，新闻成了旧闻。正如前面说到的，获取新闻有更方便快捷的渠道。有的想法如果140字以内就说完的，就发到twitter上去吧。

十大热门文章大都是技术开发相关的，确实说明我今年在motion和动画方面做的工作少了不少。但其实我还是经常在关注这方面的内容，特别是今年逐步自学了Cinema 4D后，更是喜欢上这款三维软件。现在还是在积累阶段，2010年希望能做一些更酷的motion出来吧。

博客之外，今年最大的成就，就是把终身大事给定了。5月份那会儿做的求婚AR和视频，得到了很多人的关注和祝福。10月和11月分别在福州和厦门举行了婚礼，反倒比较低调：）

再见了2009。

Related Posts :

• 2009/05/06 -- Making of AR Proposal
• 2009/09/03 -- 八个我最常用的AS3开源类库
• 2009/08/13 -- Experiment #06: Page Flip 3D
• 2009/05/05 -- AR Proposal
• 2009/03/15 -- Face Detection in Flash, Next Big Wave?

C4D Training: Combining Cinema 4D and After Effects

CG tuts+: How to Export 3d Camera Data from Cinema 4D into After Effects

AE tuts+: Integrating Cinema 4D into After Effects

GSG: How to Export Your Scene From Cinema 4D to After Effects

Motionworks: Explosive TV promo graphics

Updated!

Pariah Studios: Cinema 4D to After Effects Tutorial

Related Posts :

• 2009/12/24 -- MG 6 Price Announcement Video
• 2009/11/16 -- Papervision 3D + 3D/Post Software Workflow
• 2009/12/08 -- Experiment #07: Papervision 3D Camera Rig
• 2008/11/23 -- Camera Tip & Trick in Motion Graphics
• 2008/06/24 -- AE – Advanced Ramp

点击观看

正好借此机会，我尝试了一下Cinema 4D与After Effects协同工作：火焰的轨迹在C4D里面做好动画，包括镜头的运动也调好。再把数据导出为aec格式，AE里就能直接用了。非常完美的工作流！

火焰是用Particular插件做的，多调几种不同的形态叠在一起，更出层次。最后找了一些火焰和爆破的素材用作叠加和背景，效果就出来了。

Related Posts :

• 2009/12/26 -- 6 Tutorials for Cinema 4D + After Effects
• 2009/11/16 -- Papervision 3D + 3D/Post Software Workflow
• 2007/03/16 -- Showreel 2007
• 2006/05/12 -- Project – Ssangyong Launch Event Video
• 2005/06/30 -- Project – Polo Movie

ES X'mas 2009

Related Posts :

• 2009/11/13 -- Project – Mercedes-Benz StarElite Experience Website
• 2009/07/21 -- Project – Mercedes-Benz E-Class Web Special 2009
• 2009/05/14 -- FWA Special Day
• 2009/05/05 -- Diesel – Only The Brave
• 2009/05/05 -- Project – Mercedes-Benz E-Class Web Special

Compiled Clip和SWC File都包含经过编译后的Flash内容，区别在于：一个是“Clip”，存在于库中；另一个是“File”，是独立的文件。

如上图所示，在为ActionScript导出的元件上点击右键，可以看到生成Compiled Clip和导出SWC File的选项。这里常见的误解是以为这个操作只会编译当前选择的元件，实际的情况是除此之外还会把库中所有第一帧导出的元件也一同编译进来。要确认Compiled Clip或者SWC File中包含了些什么类，可以用闪客精灵等破解软件或者Flash Develop自带的SWC浏览工具来分析。

Flash CS4编译时获取类定义的顺序

Flash CS4中关于ActionScript类的路径设置共有三处，分别是：

• Source path，就是放.as文件的地方。
• Library path，包含SWC文件的路径。
• External library path，也是SWC文件的路径，不过这个SWC中包含的类定义不会被编译到最终swf文件中。

发布swf文件的时候，Flash编译器优先在Source Path中寻找是否有类定义。其次是Compiled Clip，最后是SWC和外部SWC。

如果源文件中包含有Compiled Clip，则编译器还可以在Compiled Clip中寻找类定义。Flash自带的组件就是用了这种方式。

如果源文件绑定了文档类，则该类必须能在Source Path或Compiled Clip中找到。SWC或外部SWC文件中即使包含了该类，也是无效的，编译器会自动生成默认的类定义来代替。

外部SWC文件的进阶用法

在进行模块化ActionScript/Flex项目开发的时候，灵活应用RSL（运行时共享库）来减少文件大小是非常重要的手段。这里面就要用到使用外部SWC文件编译的技术。比如我们制作了一个module.fla文件，在发布选项里面勾选“Export SWC”，就会在发布module.swf文件的同时还生成module.swc。

接下来在其他模块中如何调用module.swf中的类定义呢？

通常我们采用默认的加载方式，module.swf是被加载到当前应用程序域下的子域中。然后通过ApplicationDomain.getDefinition()方法来得到module里的类定义。

RSL的做法是把module.swf加载到当前应用程序域中，这样一来其他任意模块可以直接用类名访问到module.swf中的类定义。

loader.load(new URLRequest("module.swf"), new LoaderContext(false, ApplicationDomain.currentDomain));

但是直接引用的类，必须是编译器找得到的。在满足我们不增加文件大小前提下的选择就只有使用外部SWC文件的方式。把module.swc加进外部SWC路径中，编译正常通过，最终的swf文件中不包含module中的类定义。

这里要特别注意区分运行时和编译时两种情境。编译时的类是通过外部SWC得到的。运行时的类则是从当前应用程序域中获取的。

至此我们可以看到ActionScript 3和以前的加载方式有很大的不同，特别要熟练领会应用程序域的概念，让文件的划分更为合理，这在模块化开发中是十分重要的。

优化编译速度

因为Compiled Clip和SWC File是编译过的，在最终发布的时候无需再次编译，所以能够加快编译的时间，这在类的数量非常大的时候很有用。在使用第三方类库的时候，也尽量使用SWC File，还可以避免非程序员意外修改了源代码的情况。

此外如果你使用外部编辑器，如Flex/FDT/Flash Develop等，它们已经提供了很好的代码检查功能。我们可以在ActionScript设置对话框里面取消下面两个选项的勾选，这样也可以加快一点编译速度。

本文中包含的一些测试的源文件下载。

更多相关资料：

• Modular Applications
• 使用RSL来减小Flex生成的SWF文件的大小
• 就这样，创建了自己的运行时共享库（RSL）

Related Posts :

• 2009/11/16 -- Interacting with Papervision 3D
• 2009/06/04 -- Flash字体嵌入方法总结—(4)进阶篇
• 2009/06/04 -- Flash字体嵌入方法总结—(3)ActionScript提高篇
• 2009/06/04 -- Flash字体嵌入方法总结—(2)ActionScript基础篇
• 2009/12/26 -- 6 Tutorials for Cinema 4D + After Effects

 
（hint：点任意物体更改镜头的旋转中心）

相比内置的orbit方法，除了在控制Camera动画上更方便以外，还间接解决了万向节死锁的问题。

source download

Related Posts :

• 2008/11/23 -- Camera Tip & Trick in Motion Graphics
• 2009/12/31 -- Best of Kevin Cao 2009
• 2009/12/26 -- 6 Tutorials for Cinema 4D + After Effects
• 2009/12/24 -- MG 6 Price Announcement Video
• 2009/11/16 -- Papervision 3D + 3D/Post Software Workflow

http://www.verbatim.jp/senshuken/

开场展示给用户的是随机挑选出来的机器人，变形出现的动作做得非常精彩。

选择自己制造吧，系统先会随机给用户一圈零件，然后我们要靠回答问题来组装身体部件。答对的问题越多，机器人的初始能力值就越高。

然机器人造好以后就可以和其他人PK升级，还可以选择和几个Boss对战。作战的时候下方有三个特殊技能可以使用，灵活运用并取得胜利吧。当然就这么看着他们随机斗来斗去也是一件乐事。

胜利了的机器人有获胜的动作，失败了就表现的垂头丧气，骨骼动画表现的非常出色。

和去年的动物园网站一样，这是个非常耐玩的网站，并且在技术上又有新的突破。Roxik无愧于Site of the Year得主的实力。

Related Posts :

• 2009/11/13 -- Project – Mercedes-Benz StarElite Experience Website
• 2009/07/21 -- Project – Mercedes-Benz E-Class Web Special 2009
• 2009/03/15 -- Face Detection in Flash, Next Big Wave?
• 2008/10/08 -- Flash on the Beach 2008
• 2008/06/08 -- Amazing Eco Zoo Website

首先我们来看看After Effects（AE），AE的三维层功能用来摆平面那是相当方便快捷。下图中我建立了一个985×600的合成，然后随便摆放了两个平面。

想象一下左边平面贴一张图片，右边平面贴文字，是不是就是一个常见的3D场景呢？接下来，就跟我一起把这个Layout还原到Papervision 3D中去吧。

第一步是相机参数的匹配，在AE中打开相机参数设置窗口：

图中显示了一个35mm相机的数据。我们把Units（单位）一栏从millimeters改为pixels：

窗口中的数值全部都转换成了像素单位。其中Focal Length就是我们需要的camera.focus。但camera.zoom不是图中那个Zoom值，而是Comp Size和Film Size的比值，即：

600 / 62.16 = 9.65

怎么样，是不是很方便呢？但如果手头刚好没有AE怎么办？没关系，把以下等式记下来，你也可以自己计算：

1英寸=25.4毫米=72像素(72dpi)

根据这个等式，35mm相机的Focal Length计算如下，结果和AE里的完全一样。

35 * 72 / 25.4 = 99.21

只要计算好camera的focus和zoom这两个属性，相机参数就可以完全匹配了。

//35mm
camera.focus = 99.21;
camera.zoom = 9.65;

下面我们来谈谈camera.fov（Field of View）。这个值对应的是图中的Angle of View值，该值有三种计算方式（Measure Film Size）：

1. Vertically（垂直）
2. Horizontally（水平）
3. Diagonally（对角线）

Papervision 3D中的fov对应的是垂直方式，所以我们把垂直方式下计算得出的Angle of View赋给camera.fov：

camera.fov = 34.79

这和上面提到的设置camera.focus的效果是一样的。但是我比较推荐用focus来控制，这是因为fov值依赖于viewport.viewportHeight，如果视口的高度发生变化（比如设置了viewport.autoScaleToStage的情况 ），fov也会跟着改变。但是focus是不会变的。

下一步是物体坐标的匹配。我们知道Papervision 3D使用左手坐标系，y轴向上。检查AE使用的坐标系，发现y轴是相反的。所以AE中的坐标在Papervision 3D中使用时要注意：

y，rotationX，rotationZ值都要取反。

示例中相机和两个平面的位置信息如下：

对应的代码为：

camera.x = 492.5;
camera.y = -300;
camera.z = -666.7;
 
camera.target.x = 492.5;
camera.target.y = -300;
camera.target.z = 0;
 
greenPlane = new Plane(new ColorMaterial(0x00ff00), 500, 400);
greenPlane.x = 628.5;
greenPlane.y = -290;
greenPlane.z = 219.7;
greenPlane.rotationY = 38;
greenPlane.rotationZ = 4;
scene.addChild(greenPlane);
 
redPlane = new Plane(new ColorMaterial(0xff0000), 500, 400);
redPlane.x = 77.6;
redPlane.y = -347.2;
redPlane.z = 1132;
redPlane.rotationX = -30;
redPlane.rotationZ = -10;
scene.addChild(redPlane);

注意：Papervision 3D 2.0使用欧拉角来表示旋转值，这是一种有局限性的算法，并不能和AE中的旋转值完全匹配。我在测试中发现一旦rotationY值非0，rotationX值就不能匹配。让我们一起期待3.0能够解决这个问题。

After Effects示例和代码下载

以上就是AE转换Papervision 3D的全步骤，你可以下载上面的示例自己试验一下。弄懂原理以后，再扩展到其他软件里也就很简单了。下面我们再来看看Cinema 4D中的情况。

我建立了一个1000x700的场景，放了一个圆柱和立方体。在Cinema 4D的视图中显示如下：

先来看看Cinema 4D中的Camera的参数如下：

这是一个50mm的镜头，Focal Length和AE中的一样，直接赋给camera.focus就可以了。此外再多解释一下这里的Field of View：在Cinema 4D中这个值是用水平方式计算的，需要换算后才能用到camera.fov上，比例等于场景的长宽比（这里就是10/7）。

接下来我们再来看看变换属性的转换，以绿色圆柱为例：

Papervision 3D和Cinema 4D都使用左手坐标系。所以各个变换属性都是一一对应的。但是Cinema 4D中的旋转值是使用H（heading），P（pitch），B（bank）来表示的，对应关系如下：

• H 对应 do3d.localRotationY
• P 对应 do3d.localRotationX
• B 对应 do3d.localRotationZ

由此得到相应的ActionScript代码如下：

cylinder = new Cylinder(new FlatShadeMaterial(light, 0x00ff00, 0x003300), 88, 330, 24, 1);
cylinder.x = 11;
cylinder.y = 32;
cylinder.z = 400;
cylinder.localRotationY = 100;
cylinder.localRotationZ = 295;
scene.addChild(cylinder);

好了，运行代码，看看渲染结果是否和在Cinema 4D中看到的完全一致呢。

Cinema 4D示例和代码下载

其他的软件系统也都可以用类似的方法转换：相机的参数基本都一样，只要再弄清楚目标3D系统使用什么坐标系就可以了。此外还有些单位的问题也需要注意一下，比如Maya中很多的数值范围都是0～1的，在转换时统一放大100倍会更好处理。

使用上面介绍的方法，你可以利用自己所熟悉的后期或三维软件来做设计和开发的辅助，当然你也可以尝试使用VizualPV3D或者preFab等“原生”Flash 3D系统来做可视化编辑。等这些软件成熟以后，会是一个不错的选择。希望本文对你有帮助，欢迎留言探讨。

Related Posts :

• 2009/12/26 -- 6 Tutorials for Cinema 4D + After Effects
• 2009/12/24 -- MG 6 Price Announcement Video
• 2009/11/16 -- Interacting with Papervision 3D
• 2008/06/24 -- AE – Advanced Ramp
• 2009/12/31 -- Best of Kevin Cao 2009

1. 3D物体的hit检测
2. InteractiveSceneManager
3. VirtualMouse
4. Mouse3D

我们知道要让Papervision 3D的互动机制开始运作，必须满足以下两个条件：

1. viewport.interactive = true;
2. do3d.material.interactive = true;

然后我们就可以监听do3d发出的事件（InteractiveSceneEvent）。

那么Papervision 3D是怎样实现3D物体与鼠标的hit检测呢？

来看看Viewport类提供的以下实例方法：

1. hitTestPoint2D()
2. hitTestMouse()
3. hitTestPointObject()

这些方法就是三维hit检测的实现（实现方法属于图形学的范畴，本文不深入讨论，有兴趣的可以研究代码）。这些方法返回一个包含了所有检测信息的RenderHitData对象实例，该实例有以下属性：

• x,y,z：碰撞点的3D位置。
• u,v：碰撞点的uv，通常是0～1的范围，但是MovieClipMaterial例外。
• displayObject3D：碰撞的do3d。
• material：碰撞的材质。
• renderable：实现了IRenderable接口的对象，通常是Triangle3D（三角面）。
• isHit：是否碰撞。

点击查看RenderHitData示例 | 源代码

我们知道Papervision 3D中互动事件的管理由InteractiveSceneManager类来实现，可以通过以下代码得到对该类实例的引用。

viewport.interactiveSceneManager

InteractiveSceneManager实例在每帧更新时会调用updateRenderHitData()，该方法正是调用viewport.hitTestPoint2D()来更新的renderHitData的信息，从而进行一系列的检测，并发送对应的InteractiveSceneEvent。

VirtualMouse(虚拟鼠标)：

viewport.interactiveSceneManager.virtualMouse

在我们理解的MovieClip作为贴图被贴到3D物体上时，实际上是缓存的位图贴到3D物体上，所以就会失去了原来的互动特性。而虚拟鼠标就是用于触发MovieClipMaterial的互动。

Papervision 3D中的VirtualMouse原身是senocular写的类。理解虚拟鼠标的原理对我们开发时遇到的问题会有很大的帮助。

在Papervision 3D内部，对应虚拟鼠标的xy坐标的就是renderHitData的uv。

Mouse3D：

viewport.interactiveSceneManager.mouse3D

Mouse3D很容易和VirtualMouse混淆起来，但其实他们是很不一样的。Mouse3D是DisplayObject3D的子类，说明它其实也是一个3D物体。Mouse3D类扩展的唯一实例方法是updatePosition()，作用是计算并对齐碰撞点的法线方向。在实际应用中，我们可以用Mouse3D帮助对齐3D物体到碰撞的表面，用copyTransform()方法就可以了。

关于OBJECT_OVER和OBJECT_OUT：

InteractiveSceneManager.enableOverOut属性可以开关这两个事件的检测。特别还需注意的是如果鼠标没有移动，就不会发出OBJECT_OVER和OBJECT_OUT事件。这会在某些情况下出现问题：比如鼠标没动，而物体在动的情况。这种情况可以自行通过viewport.hitTestMouse()判断来解决。所以监听这两个事件的时候要特别注意。

Related Posts :

• 2009/11/16 -- Papervision 3D + 3D/Post Software Workflow
• 2008/11/26 -- Papervision3D旋转和矩阵
• 2008/11/25 -- Barcinski & Jeanjean Website (Part3)
• 2008/04/18 -- PV3D优化CPU占用技巧
• 2008/04/12 -- PV3D GreatWhite

Title : Mercedes-Benz StarElite Experience Website
Client : Mercedes-Benz China
Agency : Energy Source
Date : 2009.11.11

Art & Design : ES Neo Team
Motion & Flash : ES Guru Team
Integrate & Develop : ES Tech Team
3D : Motion Magic

Related Posts :

• 2009/07/21 -- Project – Mercedes-Benz E-Class Web Special 2009
• 2009/05/05 -- Project – Mercedes-Benz SUV Family Web Special
• 2009/05/05 -- Project – Mercedes-Benz Autoshow 2009 Web Special
• 2009/05/05 -- Project – Mercedes-Benz E-Class Web Special
• 2009/03/16 -- Project – Mercedes-Benz B-Class Web Special

我最喜欢下面这段《Rewind》，展示了这一令人羡慕的团队的幕后工作的整个过程。项目中break和项目后庆祝的一幕很平实，却让我很感动，很久没有好好体会这样的激情了。

update：由于Psyop的要求，我删除了优库上的转载，喜欢的朋友请自行上Vimeo。http://vimeo.com/6717553

update2：Psyop开设了优库频道，近期就会上传，请被墙住的爱好者们保持关注。http://u.youku.com/user_show/uid_psyop

Related Posts :

• 2008/11/20 -- Sea Orchestra: The Making Of on Vimeo
• 2005/10/10 -- Motion – 公司&工作室网址集合
• 2009/07/08 -- Sehsucht “Idea”
• 2009/01/13 -- Anything You Synthesize
• 2008/11/11 -- Next Season

同时发布的消息还有：Ben Hopkins加入开发组，相信他在计算机图形方面的先锋技术能够帮助这一开源技术得到更好的提升。

新的版本通过Github分发和管理，大家可以到这里取得源代码。Git是一种先进的版本控制系统，可惜我刚玩溜SVN，又要学习新的东西了。Git在Windows上的图形界面工具可以去这里下载，这里有视频教程。有过版本控制经验的开发者应该能很快上手，Andy Zupko直夸好用哦。

Related Posts :

• 2009/12/31 -- Best of Kevin Cao 2009
• 2009/11/18 -- Roxik新作：Verbatim机器人大战
• 2008/10/08 -- Flash on the Beach 2008
• 2008/06/08 -- Amazing Eco Zoo Website
• 2008/05/14 -- Rhythm of Lines 源代码放出

Uniqlo的Collection 2009网站又再次为Uniqlo  Style创造了一个新高度。这次是运用大量男女模特的T台走秀视频，更可以直接点击视频中的模特链接去商品页面。乍一看可能觉得没什么，但是请看：多人走秀的视频一共有140段左右，每个模特单独又有20多段（共68人），总共的视频是千位这个数量级。先是拍摄的工作量就已经让人头大了，还要把每段视频的模特位置信息track下来为flash所用，后期工作庞大的信息量也是很考验执行功力的。

好的互动网站就应当如此，用让人印象深刻的震撼画面去吸引眼球，用流畅的互动体验去营造出自然的沉浸感。光是大量视频堆砌的网站只是徒有一身华丽的外衣，而深入到到骨子里的互动血液才更值得去修炼。

Related Posts :

• 2009/11/18 -- Roxik新作：Verbatim机器人大战
• 2009/11/13 -- Project – Mercedes-Benz StarElite Experience Website
• 2009/08/10 -- EnergyLab
• 2009/07/21 -- Project – Mercedes-Benz E-Class Web Special 2009
• 2009/05/05 -- Diesel – Only The Brave

跳转后查看详细代码。

package demo.papervision3d
{
	import gs.TweenLite;
	import gs.easing.Elastic;
 
	import com.kvc.extend.papervision3d.RubiksCube;
 
	import org.papervision3d.core.math.Quaternion;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.view.BasicView;
 
	import flash.display.Bitmap;
	import flash.display.StageQuality;
	import flash.events.*;
 
	/**
	 * @author Kevin Cao
	 */
	[SWF(width="1000", height="600", backgroundColor="#cccccc", frameRate="30")]
	public class RubiksCubeDemo2 extends BasicView
	{
 
		private var rubiksCube : RubiksCube;
 
		[Embed(source="../../../assets/front.jpg")]
		private var FrontAsset : Class;
 
		[Embed(source="../../../assets/back.jpg")]
		private var BackAsset : Class;
 
		[Embed(source="../../../assets/left.jpg")]
		private var LeftAsset : Class;
 
		[Embed(source="../../../assets/right.jpg")]
		private var RightAsset : Class;
 
		[Embed(source="../../../assets/top.jpg")]
		private var TopAsset : Class;
 
		[Embed(source="../../../assets/bottom.jpg")]
		private var BottomAsset : Class;
 
		private var isDown : Boolean = false;
 
		private var _x : Number;
		private var _y : Number;
 
		private var _vx : Number = 0;
		private var _vy : Number = 0;
 
		public function RubiksCubeDemo2()
		{
			init();
		}
 
		protected function init() : void
		{
			// viewport's interactive set to true.
			viewport.interactive = true;
 
			camera.z = -1500;
			camera.focus = 200;
			camera.zoom = 2;
 
			var frontMat : BitmapMaterial = new BitmapMaterial((new FrontAsset() as Bitmap).bitmapData);
			var backtMat : BitmapMaterial = new BitmapMaterial((new BackAsset() as Bitmap).bitmapData);
			var leftMat : BitmapMaterial = new BitmapMaterial((new LeftAsset() as Bitmap).bitmapData);
			var rightMat : BitmapMaterial = new BitmapMaterial((new RightAsset() as Bitmap).bitmapData);
			var topMat : BitmapMaterial = new BitmapMaterial((new TopAsset() as Bitmap).bitmapData);
			var bottomMat : BitmapMaterial = new BitmapMaterial((new BottomAsset() as Bitmap).bitmapData);
 
			// material's interactive set to true.
			frontMat.interactive = backtMat.interactive = leftMat.interactive = rightMat.interactive = topMat.interactive = bottomMat.interactive = true;
 
			rubiksCube = new RubiksCube(RubiksCube.createMaterialListArray(frontMat, backtMat, leftMat, rightMat, topMat, bottomMat));
 
			// IMPORTANT: add event listener to each child cube rather than rubikscube object itself.
			for(var i : uint = 0;i < 26; i++)
			{
				rubiksCube.getChildByName("cube" + (i + 1)).addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, clickHandler);
			}
 
			scene.addChild(rubiksCube);
 
			startRendering();
 
			stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, upHandler);
 
			stage.quality = StageQuality.LOW;
		}
 
		override protected function onRenderTick(evt : Event = null) : void
		{
			if(!isDown)
			{
				if(_vx != 0 || _vy != 0)
				{
					_vx *= .9;
					_vy *= .9;
					if(Math.abs(_vx) < .5)
					{
						_vx = 0;
					}
					if(Math.abs(_vy) < .5)
					{
						_vy = 0;
					}
					var q : Quaternion = Quaternion.createFromEuler(-_vx, 0, -_vy, true);
					rubiksCube.transform.calculateMultiply3x3(q.matrix, rubiksCube.transform);
				}
			}
 
			super.onRenderTick();
		}
 
		private function keyUpHandler(evt : KeyboardEvent) : void
		{
			var command : String = String.fromCharCode(evt.charCode);
			switch(command)
			{
				//default command
				case "l":
				case "r":
				case "u":
				case "d":
				case "f":
				case "b":
					if(evt.ctrlKey && evt.altKey)
					{
						// reverse
						rubiksCube.singleRotate(command + "'");
					} else {
						rubiksCube.singleRotate(command);
					}
					break;
 
				//combo command
				case "1":
					rubiksCube.comboRotate("l-u-b'-d-r'", 2);
					break;
				case "2":
					rubiksCube.comboRotate("r-d'-b-u'-l'", 2);
					break;
			}
		}
 
		private function downHandler(event : MouseEvent) : void
		{
			_x = mouseX;
			_y = mouseY;
			isDown = true;
			stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
		}
 
		private function upHandler(event : MouseEvent) : void
		{
			isDown = false;
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
		}
 
		private function moveHandler(event : MouseEvent) : void
		{
			_vx = (mouseX - _x) * .4;
			_vy = (mouseY - _y) * .4;
			_x = mouseX;
			_y = mouseY;
 
			var q : Quaternion = Quaternion.createFromEuler(-_vx, 0, -_vy, true);
			rubiksCube.transform.calculateMultiply3x3(q.matrix, rubiksCube.transform);
		}
 
		private function clickHandler(event : InteractiveScene3DEvent) : void
		{
			var cube : DisplayObject3D = event.target as DisplayObject3D;
 
			// tricky: make scale and rotation value get updated from transform matrix.
			cube.yaw(0);
 
			var s : Number = cube.scale == 1 ? 0.8 : 1;
			TweenLite.to(cube, 0.3, {scale:s, ease:Elastic.easeOut});
		}
	}
}

Related Posts :

• 2009/04/20 -- Quaternion Rotation Demo
• 2009/04/18 -- Experiment #05: Rubik’s Cube
• 2008/11/26 -- Experiment #03: Four Cameras Viewer
• 2009/12/31 -- Best of Kevin Cao 2009
• 2009/12/08 -- Experiment #07: Papervision 3D Camera Rig