代码改变世界

Flash Player 10' s new 3D effects

2010-05-06 16:02  宝宝合凤凰  阅读(449)  评论(0)    收藏  举报

Flash Player 10' s new 3D effects（一）

关键字: flash player, 3d

 

 

 

目录：

 

Flash Player 10' s new 3D effects（一）

Flash Player 10' s new 3D effects（二）

Flash Player 10' s new 3D effects（三）


参考资料：

 

Adobe ActionScript 3.0 Programming 第二十三章 在三维环境中工作

AdvancED_ActionScript 3.0 第七章 3D IN FLASH 10

 

3D基础知识

 

ActionScript中的3D简介

 

如果将某个显示对象的Z属性显示设置为数值 ，则该对象会自动创建一个3D转换矩阵 。您可以通过更改此矩阵来修改该对象的3D转换设置

 

重要术语和概念

 

  • 透视 ：在 2D 平面上将平行线表示成聚合于一个消失点，从而获得深度和距离的视觉效果
  • 投影：为多维对象生成 2D 图像； 3D 投影将 3D 点映射到 2D 平面
  • 旋转：通过按圆周运动的方向移动对象内的每个点来更改对象的方向（通常也会更改其位置）
  • 转换：通过平移、旋转、缩放、倾斜或这些操作的组合来更改 3D 点或点集
  • 平移：通过将对象内的每个点往同一方向移动相同的距离来更改对象的位置
  • 消失点 ：在用线性透视法表示时，逐渐远离的平行线看似相交的点
    Java代码 复制代码
    1. // 设置显示元素的中心为消失点就可以像下面这样：   
    2. .transform .perspectiveProjection .projectionCenter =new Point (stage.stageWidth / 2, stage.stageHeight / 2);  
     
  • 矢量 ：3D 矢量使用笛卡尔坐标 x、y 和 z 表示三维空间中的点或位置
  • 顶点：转角点
  • 纹理式网格 ：在 3D 空间中用于定义对象的任意点
  • UV 映射 ：将纹理或位图应用于 3D 表面的一种方式。UV 映射将值分配给图像上的坐标，以水平 (U) 轴和垂直 (V) 轴的百分比值形式表示。
  • T 值 ：当对象靠近或远离当前视点时用于确定 3D 对象大小的缩放系数
  • 剔除 ：呈现或不呈现具有特定缠绕方式的表面。通过使用剔除，您可以隐藏对当前视点不可见的表面

弧度和角度之间的转换公式：

 

Flash 10 3D 旋转的角度是度数 而不是弧度

radians = degrees * PI / 180
degrees = radians * 180 / PI

 

了解 Flash Player 和 AIR 运行时的 3D 功能

 


以下 ActionScript 类支持与 3D 相关的新功能 ：

 

  1. flash.display.DisplayObject 类包含 z 属性和新的旋转和缩放属性，这些属性用于操作 3D 空间中的显示对象。DisplayObject.local3DToGlobal () 方法提供了一种将 3D 几何图形投影到 2D 平面 的简单方式 。  
    Java代码 复制代码
    1. // 屏幕坐标系和3D坐标系：   
    2.   
    3. // 将_sprite的(200, 0, 0)的那个点三维点转换成一个二维点   
    4. // 可以知道何时一个3D物体移出屏幕，这对判断一个对象是否仍然在屏幕上是很有用的   
    5. var p:Point = _sprite.local3DToGlobal(new Vector3D(200, 0, 0));   
    6.   
    7. // 二维坐标 转换成 三维坐标   
    8. var p:Vector3D = _sprite.globalToLocal3D(new Point(mouseX, mouseY));   
    9.   
    10. // pointAt 方法接收一个 Vector3D 对象作为指向的目标，这边设成了鼠标光标   
    11. _sprite.transform.matrix3D.pointAt(new Vector3D(mouseX, mouseY, 0));  
     
  2. flash.geom.Vector3D 类可用作管理 3D 点 的数据结构 。该类还支持矢量数学运算。
  3. flash.geom.Matrix3D 类支持复杂的 3D 几何转换 ，例如旋转、缩放和平移。
  4. flash.geom.PerspectiveProjection 类控制着将 3D 几何图形映射到 2D 视图 的相关参数 。

在 ActionScript 中，有两种不同的模拟 3D 图像的方式：


  1. 在 3D 空间 中排列平面对象并进行动画处理 。这种方式需要使用显示对象的 x、y 和 z 属性来对显示对象进行动画处理，或者使用 DisplayObject 类设置旋转和缩放属性。使用DisplayObject.transform.matrix3D 对象可以实现更为复杂的运动 。DisplayObject.transform.perspectiveProjection 对象可自定义显示对象在 3D 透视 中的绘制方式 。如果需要对主要包含平面的 3D 对象进行动画处理，可以使用这种方式。这种方式的例子包括 3D 图库或者 3D 空间中排列的 2D 动画对象。
  2. 从 3D 几何图形生成 2D 三角形 ，然后用纹理呈现这些三角形。要使用这种方式，必须首先定义和管理有关 3D 对象的数据，然后将这些数据转换成 要呈现的 2D 三角形 。可以将位图纹理映射到这些三角形，然后使用 Graphics.drawTriangles ()方法将三角形绘制为图形对象。这种方式的例子包括从文件中加载 3D 模型数据 并将模型呈现到屏幕上，或以三角形网格形式生成和绘制 3D 图形。

 

Flash Player 10' s new 3D effects（二）

关键字: flash player, 3d

目录：

 

Flash Player 10' s new 3D effects（一）

Flash Player 10' s new 3D effects（二）

Flash Player 10' s new 3D effects（三）


参考资料：

 

Adobe ActionScript 3.0 Programming 第二十三章 在三维环境中工作

AdvancED_ActionScript 3.0 第七章 3D IN FLASH 10

 

创建和移动 3D 对象

 

下面的代码设置名为“leaf” 的显示对象的坐标：

Java代码 复制代码
  1. leaf.x = 100; leaf.y = 50; leaf.z = -30;  

在 leaf 的 Transform 对象的 matrix3D 属性中，可以查看这些值，以及从这些值派生出的属性：

Java代码 复制代码
  1. var leafMatrix:Matrix3D = leaf.transform.matrix3D;   
  2. trace(leafMatrix.position.x);   
  3. trace(leafMatrix.position.y);   
  4. trace(leafMatrix.position.z);   
  5. trace(leafMatrix.position.length);   
  6. trace(leafMatrix.position.lengthSquared);  

 

在 3D 空间中移动对象

Java代码 复制代码
  1. var depth:int = 1000;   
  2. function ellipse1FrameHandler(e:Event):void  
  3. {   
  4.     ellipse1Back = setDepth(e, ellipse1Back);   
  5.     e.currentTarget.z += ellipse1Back * 10;   
  6. }   
  7.   
  8. function ellipse2FrameHandler(e:Event):void  
  9. {   
  10.     ellipse2Back = setDepth(e, ellipse1Back);   
  11.     e.currentTarget.z += ellipse1Back * 20;   
  12. }   
  13.   
  14. function setDepth(e:Event, d:int):int  
  15. {   
  16.     if(e.currentTarget.z > depth)   
  17.     {   
  18.         e.currentTarget.z = depth;   
  19.         d = -1;   
  20.     }   
  21.     else if (e.currentTarget.z < 0)   
  22.     {   
  23.         e.currentTarget.z = 0;   
  24.         d = 1;   
  25.     }   
  26. }  

 

在 3D 空间中旋转对象

 

可以通过三种方式旋转对象，具体取决于如何设置对象的旋转属性：rotationX 、rotationY 和 rotationZ 。


将 3D 对象投影到 2D 视图上


flash.geom 包中的 PerspectiveProjection 类提供了一种在 3D 空间中移动显示对象时应用基本透视的简单方式 。
如果未显式创建 3D 空间的透视投影，3D 引擎将使用默认的 PerspectiveProjection 对象，该对象存在于根上并会传播到其所有子项上。
用于定义 PerspectiveProjection 对象如何显示 3D 空间的三个属性是：
• fieldOfView
• projectionCenter
• focalLength
修改 fieldOfView 的值将自动修改 focalLength 的值，反之亦然，因为这两个属性相互依赖 。
在给出 fieldOfView 值的情况下，用于计算 focalLength 属性的公式为：
focalLength = stageWidth/2 * (cos(fieldOfView/2) / sin(fieldOfView/2)
通常，您需要显式修改 fieldOfView 属性。

 

视野


通过操作 PerspectiveProjection 类的 fieldOfView 属性，可以使逐渐靠近观察者 的 3D 显示对象变大 ，而使逐渐远离观察者 的对象变小 。


fieldOfView 属性指定一个介于 0 到 180 度的角度 ，该角度确定透视投影的强度。该值越大 ，沿 z 轴移动的显示对象的扭曲程度就越强 。如果 fieldOfView 值较小，则缩放程度较低，从而使对象在空间中只稍稍后移。如果 fieldOfView 值较大，则会导致较大的扭曲，并出现较大的移动。如果达到最大值 180 度，则会出现极端的鱼眼照相机镜头效果。

 

投影中心


projectionCenter 属性表示透视投影的消失点 。该属性作为相对于舞台左上角 默认注册点 (0,0) 的偏移量 。


当对象逐渐远离观察者时，该对象将朝消失点倾斜直到最终消失 。想象一下无限长的走廊。当朝走廊远处看时，两边的墙壁将聚合到走廊远处的消失点。


如果消失点位于舞台的中心，则走廊将消失于该中心点。projectionCenter 属性的默认值是舞台的中心 。

 

焦距


focalLength 属性表示视点原点 (0,0,0) 与显示点在 z 轴上的位置 之间的距离 。


较长的焦距 相当于视野较窄、对象间距离经过压缩的摄远镜头 。较短的焦距 相当于广角镜头 ，可获得较宽的视野和较大的扭曲。中等的焦距 相当于肉眼 所见的效果。


通常，当显示对象移动时， focalLength 属性会在透视转换过程中动态地重新进行计算 ，不过您可以显式设置该属性。

 

默认透视投影值


在根上创建的默认 PerspectiveProjection 对象具有以下值：
• fieldOfView : 55
• perspectiveCenter : stagewidth/2, stageHeight/2
• focalLength : stageWidth/ 2 * ( cos(fieldOfView/2) / sin(fieldOfView/2) )

 


 

示例：透视投影：

 

见附件压缩包

 

  • 大小: 61.3 KB

 

Flash Player 10' s new 3D effects（三）

关键字: flash player, 3d

目录：

 

Flash Player 10' s new 3D effects（一）

Flash Player 10' s new 3D effects（二）

Flash Player 10' s new 3D effects（三）


参考资料：

 

Adobe ActionScript 3.0 Programming 第二十三章 在三维环境中工作

AdvancED_ActionScript 3.0 第七章 3D IN FLASH 10

 

执行复杂的 3D 转换

 

使用 Matrix3D 类可以转换坐标空间内的 3D 点 ，也可以将 3D 点从一个坐标空间映射 到另一个坐标空间。
您可以用 Matrix3D 对象的方法对显示对象执行平移 、旋转 、缩放 和透视投影 。
使用 Vector3D 类及其 x、y 和 z 属性可管理 3D 点。该类还可以表示具有方向和大小 的物理空间矢量 。

通过 Vector3D 类的方法，可以执行有关空间矢量的常见计算，例如加法 、点积 和叉积 计算。
注： Vector3D 类与 ActionScript Vector 类无关 。Vector3D 类包含的属性和方法用于定义和操作 3D 点，而 Vector 类则支持类型对象数组 。

 

创建 Matrix3D 对象

 

有三种创建或检索 Matrix3D 对象的主要方式：

  • 使用 Matrix3D() 构造函数实例化 新的矩阵。Matrix3D() 构造函数需要使用包含 16 个数值的 Vector 对象，并将每个值放入一个矩阵单元中。例如：var rotateMatrix:Matrix3D = new Matrix3D(1,0,0,1, 0,1,0,1, 0,0,1,1, 0,0,0,1);
  • 设置显示对象的 z 属性 的值。然后从该对象的 transform.matrix3D 属性检索转换矩阵。
  • 通过获取根显示对象的 perspectiveProjection .matrix3D 属性的值，检索用于控制舞台上 3D 对象显示方式的 Matrix3D 对象。

应用多种 3D 转换

 

Java代码 复制代码
  1. rect1.rotationX = 15;   
  2. rect1.scaleX = 1.2;   
  3. rect1.x += 100;   
  4. rect1.y += 50;   
  5. rect1.rotationZ = 10;   
  6.   
  7. var matrix:Matrix3D = rect2.transform.matrix3D;   
  8. matrix.appendRotation(15, Vector3D.X_AXIS);   
  9. matrix.appendScale(1.2, 1, 1);   
  10. matrix.appendTranslation(100, 50, 0);   
  11. matrix.appendRotation(10, Vector3D.Z_AXIS);   
  12. rect2.transform.matrix3D = matrix;  

 

使用 Matrix3D 对象重新排序显示

 

为确保 3D 显示对象的层叠顺序 对应于对象的相对深度 ，请使用如下方法：

  1. 使用 Transform 对象的 getRelativeMatrix3D () 方法获取 3D 子显示对象的相对 z 轴 值。
  2. 使用 removeChild () 方法从显示列表中删除对象。
  3. 根据 显示对象的相对 z 轴 值对显示对象进行排序 。
  4. 使用 addChild () 方法以相反顺序将子对象添加到显示列表中。
Java代码 复制代码
  1. public var faces:Array; . . .   
  2. public function ReorderChildren()   
  3. {   
  4.     for(var ind:uint = 0; ind < 6; ind++)   
  5.     {   
  6.         faces[ind].z = faces[ind].child.transform.getRelativeMatrix3D(root).position.z;   
  7.         this.removeChild(faces[ind].child);   
  8.     }   
  9.     faces.sortOn("z", Array.NUMERIC | Array.DESCENDING);   
  10.     for (ind = 0; ind < 6; ind++)   
  11.     {   
  12.         this.addChild(faces[ind].child);   
  13.     }   
  14. }  
 

通过三角形获得 3D 效果

 

在 ActionScript 中，可以使用 Graphics.drawTriangles () 方法执行位图转换，因为 3D 模型是通过空间中的一组三角形来表示的。

Graphics.drawTriangles() 方法使用 Vector 对象。<Number>，用于指定三角形路径的点位置：
drawTriangles(vertices :Vector.<Number>, indices :Vector.<int> = null, uvtData :Vector.<Number> = null,
culling :String = "none"):void

Java代码 复制代码
  1. graphics.beginFill(0xFF8000);   
  2. graphics.drawTriangles(   
  3. Vector.<Number>([10,10, 100,10, 10,100, 100,100]),   
  4. Vector.<int>([0,1,2, 1,3,2]));  
 

indices 值是点索引

 

转换位图

 

位图转换可在三维对象上提供透视视觉效果或“ 纹理”。


 

UV 映射

 

一旦开始处理纹理，就需要使用 drawTriangles() 的 uvtData 参数。

UV 映射是一种纹理化对象的方法。它依赖于两个值：U 水平 (x) 值和 V 垂直 (y) 值。这两个值不是基于像素值，而是基于百分比 。0 U 和 0 V 表示图像的坐上角， 1 U 和 1 V 表示右下角：


可以为三角形的矢量指定 UV 坐标，从而将矢量自身关联到图像上的相应位置：


 

 UV 值与三角形的点保持一致：


Graphics.drawTriangles() 方法也接受关于三维转换的一条可选信息：T 值 。uvtData 中的 T 值表示 3D 透视 ，更具体地说，表示相关顶点的缩放系数 。

 

用于确定 T 值的等式 为：
T = focalLength/(focalLength + z);


Demo source code见附件压缩包

 

剔除

 

在 3D 空间中，三维对象“ 背面 ” 的表面对视点不可见：



 因此， Graphics.drawTriangles() 方法采用第四个参数来建立剔除值：

该剔除参数是来自 TriangleCulling 枚举类的值 ：TriangleCulling.NONE 、TriangleCulling.POSITIVE 和TriangleCulling.NEGATIVE 。这些值与定义对象表面的三角形路径的方向有关 。用于确定剔除的 ActionScript API 假设 3D形状的所有外向三角形都是以同一路径方向绘制的。一旦三角形面经过旋转后，其路径方向也会改变。此时可以剔除（不呈现）该三角形。

 

因此，如果 TriangleCulling 值为 POSITIVE ，则会移除正向路径方向（顺时针） 的三角形。如果 TriangleCulling 值为NEGATIVE ，则会移除负向路径方向（逆时针） 的三角形。对于立方体，朝前的表面具有正向路径方向，而朝后的表面具有负向路径方向：


  • 大小: 18.6 KB
  • 大小: 16.8 KB
  • 大小: 20 KB
  • 大小: 13.9 KB
  • 大小: 19.4 KB
  • 大小: 11.7 KB
  • 大小: 22.1 KB