在使用Flash 3D的实际工作中，我们经常会需要在3D空间中摆放物体，或者是去匹配平面Layout。但是由于可视环境的缺乏，我们常常要：调参数——看效果——再调参数……周而复始，费时费力。能不能有更好的方法呢？本文就介绍一下使用常见的后期或三维软件来做Layout，再完美转换回Papervision 3D中的方法。

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

viewport

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

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

camera setting 1

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

camera setting 2

窗口中的数值全部都转换成了像素单位。其中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值都要取反。

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

position setting

对应的代码为：

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的视图中显示如下：

cinema4d

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

camera

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

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

2009-11-17_00356

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系统来做可视化编辑。等这些软件成熟以后，会是一个不错的选择。希望本文对你有帮助，欢迎留言探讨。

« »