转第十五章 3D 基础（1）（as3.0)

关注

转载最新推荐文章于 2026-06-05 11:46:55 发布 972 阅读 AI 写同款· GEO 优化 ›

AS3.0 Bitmap类实现图片3D旋转效果 package { import flash.display.Sprite; import flash.display.Loader; import flash.net.URLRequest; import flash.events.Event; import flash.display.Bitmap; import flash.geom.PerspectiveProje 阅读详情

  前面我们做的一切都是二维的（有时只有一维），但是已经可以做出非常酷的东东了。
现在，将它们带入到下一个等级。
     创建 3D 图形总是那么另人兴奋。新加入的这个维度似乎将物体真正地带入到了生活
中。如何在 Flash 中实现 3D 在无数的书籍和教学软件中都有介绍。但是我不打算跳过这
些内容，我们会很快地将所有基础的知识讲完。随后，将前面章节中讨论的运动效果放到三
维空间中。说得详细些，将给大家介绍速度，加速度，摩擦力，反弹，屏幕环绕，缓动，弹
性运动，坐标旋转以及碰撞检测。
     现在，首先要关注 sprite 影片在 3D 空间中运动，使用透视法计算影片在屏幕上的大
小和位置。当然，sprite 本身是平面的，我们看不到它的背面，侧面，顶面或
两章，我们将学习到点，线，图形和立体图形的 3D 建模。

第三维度及透视法
在 3D 背后最重要的理论就是超出 x 和 y 存在的另一个维度。这是表示深度的维度，
通常记为 z。
Flash 没有内置的 z 维度，但是要想在 ActionScript 中创建它也不是件难事。实际上，
远没有我们前面章节中的内容那么复杂！

z 轴
     首先，需要确定 z 最是朝哪个方向的：向内或向外。回忆一下第三章讨论的坐标系统，
它比普通的坐标系统在某些地方是相反的。y 轴向下，而非向上，角度则是以顺时针方向而
定的，而非逆时针方向。
    因此，当物体远离或接近我们的时候，是否应该让物体 z 轴上位置增加？没有必要去
比较哪个更正确。事实上，这个课题已经被讨论许久了，人们甚至为了描述这两种方法分别
给它们取了名字：左手系统和右手系统。
     伸出您的右手，让拇指与食指构成一个 L 形，然后将中指弯曲 90 度，每个手指都将
指向一个维度。现在，将您的食指指向 x 轴的正半轴，中指指向 y 轴的正半轴。在右手坐
标系中，拇指的指向就是 z 轴的正半轴方向。对于 Flash 而言，意味着物体远离观察者时
z 轴将增大，临近观察者时 z 轴将减小，如图 15-1 所示。

图 15-1 右手坐标系
如果我们用左手来试的话，得到的结果则是相反的。如图 15-2 所示，左手坐标系。

图 15-2 左手坐标系
下面我们使用右手坐标系为例（图 15-1）。没有理由说不能使用左手坐标系，只不过让
z 轴向内看起来比较好。在 Flash 中创建第三维度（z）的下一个步骤是如何计算模拟透视。

透视法
     透视法是指如何表述物体接近或远离我们时的方法。换句话讲，如何让物体看起来更近
或更远。一幅美术作品中可能有大量的表现透视的技巧，这里我们只关注两点：
■ 当物体离得远时，会变小。
■ 当物体远离时，它们会聚集到一个消失点上。
     大家肯定见过火车驶向地平线时的景象。当我们在 z 轴上移动物体时，需要做两件事：
■ 增大或减小物体的比率。
■ 让物体接近或远离消失点。
      在二维系统中，我们可以使用屏幕的 x 和 y 坐标作为物体的 x 和 y 坐标。只需要
一对一地映射过来即可。但是在 3D 系统中就行不通了，因为两个物体可以有相同的 x, y

坐标，由于它们的深度不同，会使它们在屏幕上有不同的位置。因此，在 3D 空间中移动
每个物体都需要知道它们各自的 x, y, z 坐标，这是屏幕坐标不能做到的。现在就要用到这
三个量来描述虚拟空间的一个位置。透视法将告诉我们应该将物体放到屏幕的什么位置。

透视公式
让物体的距离更远（增加 z），基本思想是想让它缩放比率接近0，让它的 x, y 坐标集
中到消失点的 0,0 处。幸好，缩放的比率与汇集的比率相同。因此，我们只需要根据给定
的距离计算出这个比率，然后在这两个地方使用它即可。图 15-3 帮助大家解释这个概念。

图 15-3 从侧面观察透示图
     我们距离对象有一段距离。有一个观察点：眼睛。有一个成象面，可以想象成电脑的屏
幕。对象与成象面之间有一段距离，这就是 z 的值。最后，距离观察点到成象面还有一段
距离。最后这点最为重要。虽然这段距离不完全等同于摄象机的焦距，但是与它基本相似
因此我通常用变量 fl [焦距：focal length] 表示。下面是这个公式：
       scale = fl / (fl + z)
scale 值通常是介于 0.0 到 1.0 之间的，这就是缩放和汇聚到消失点上的比率。然而，当 z
变为负数时，fl + z 接近 0 而缩放比例接近无穷大。
     拿到这个 scale 的值能做些什么呢？假设在处理一个影片（或 Sprite 的子类），我们将
这个值赋给影片的 scaleX 和 scaleY。然后再用这个因数乘以物体的 x,y 坐标，就可以算
出物体在屏幕上的 x,y 的位置。
     看一个例子。通常情况下 fl 的值在 200 到 300 之间。我们选用 250 这个值。如果 z
等于 0 ——换句话讲，物体就在成象面上--- 那么 scale 就等于 250 / (250 + 0)。结果等
于 1.0。这就是 scaleX 和 scaleY 的值（别忘了对于 scaleX 和 scaleY 而言， 1.0 就意味
着 100%）。让物体的 x,y 坐标乘以 1.0，返回的结果不变，因此物体在屏幕上的位置就等
于它自身的 x 和 y。

现在将物体向外移让 z 等于 250。则让 scale 等于 250 / (250 + 250)，scaleX 和 scaleY
等于 0.5。同样也改变了物体在屏幕上的位置。如果原来物体在屏幕上的位置是 200, 300 那
么现在就应该是 100, 150。因此，它向着消失点移动了一半的距离。（事实上，屏幕上的位
置是相对于消失点的位置而定的，大家马上会看到）。
现在，将 z 向外移动到 9750。scale 变成 250 / 10000， scaleX 和 scaleY 等于 0.025。
物体将变成一个小点儿，并且非常接近消失点。
OK，理论够了。来看代码。

ActionScript 透视
各位也许猜到了，我还要使用 Ball 类。当然，您也可以自由地选择自己喜欢物体，但
是我只专注于代码，将那些酷酷的图形留给大家去做。我们用鼠标和键盘作为交互。使用鼠

标控制小球的 x,y 坐标，方向键的上下键来控制 z 轴的前后方向。注意，因为变量 x,y 是
由 ActionScript 持有的，因此我们将使用 xpos, ypos, zpos 代表 3D 坐标。
文档类 Perspective1.as 的代码如下：
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
public class Perspective1 extends Sprite {
   private var ball:Ball;
   private var xpos:Number = 0;
   private var ypos:Number = 0;
   private var zpos:Number = 0;
   private var fl:Number = 250;
   private var vpX:Number = stage.stageWidth / 2;
   private var vpY:Number = stage.stageHeight / 2;
   public function Perspective1() {
   init();
}
   private function init():void {
   ball = new Ball();
   addChild(ball);

addEventListener(Event.ENTER_FRAME, onEnterFrame);
   stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
}
   private function onEnterFrame(event:Event):void {
     xpos = mouseX - vpX;
     ypos = mouseY - vpY;
     var scale:Number = fl / (fl + zpos);
     ball.scaleX = ball.scaleY = scale;
     ball.x = vpX + xpos * scale;
     ball.y = vpY + ypos * scale;
}
   private function onKeyDown(event:KeyboardEvent):void {
     if (event.keyCode == Keyboard.UP) {
    zpos += 5;
     } else if (event.keyCode == Keyboard.DOWN) {
    zpos -= 5;
   }
}
}
}

首先创建变量 xpos, ypos, zpos, fl。然后创建一个消失点（vanishing point）vpX, vpY。
记住当物体向远处运动一段距离后，就会聚在 0, 0 点。如果不进行偏移，所有物体都会向
屏幕左上角汇集，这并不我们想要的结果。将 vpX, vpY 设置为舞台的中心点，作为消失点。
接下来，在 onEnterFrame 中设置 xpos 和 ypos 为鼠标与消失点的偏移位置。换句话
讲，如果鼠标在中心点右面 200 像素，x 就等于 200。如果在中心点左面 200 像素的位置，
则等于 -200。
然后添加 keyDown 事件的侦听，用于改变 zpos。如果方向键上被按下 zpos 增加，

如果方向键上被按下则减小。这将使小球向着观察者更近或更远的方向运动。
最后，使用刚刚介绍过的公式计算 scale，设置小球的位置与大小。注意小球在屏幕上
的位置 x,y 是根据消失点计算的，还要加上 xpos, ypos 与 scale 的乘积。因此，当 scale 变
得很小时，小球将汇集到消失点上。
测试一下影片，开始看起来像一个简单的鼠标拖拽。这是因为 zpos 等于 0，scale 等
于 1.0。所以注意不到透视的存在。当按下方向键上时，小球向内滑入一段距离，如图 15-4
所示。现在当我们移动鼠标时，小球也会随之移动，但是移动的距离很小，产生了视差效应。

图 15-4 ActionScript 透视
     大家也许注意到了，如果长期按住方向键下，小球会变得非常大。这是对的。如果拿起
一小块石子放到眼前，它就会像一块巨石一样大。如果继续按住方向键下，它将变成无限大，
然后又收缩回去，但是这时整个小球已经颠倒或反转过来了。小球跑到了观察点的后面。因
此，如果眼睛可以看到身背后的东西，我猜这一定是我们所看到的。
     用数字解释一下，当 zpos 等于 –fl 时，公式从 scale = fl / (fl + zpos) 变为 scale = fl /
0。在许多语言中，除以 0 会报错。在 Flash 中，将得到一个无限大的值。如果再将 zpos 减
小，那么就是用 fl 除以一个负数。scale 变为负数，这就是为什么小球会颠倒并反向运动
的原因。
     学会了吗？解决方法只需在小球在超过某一点时将其设置为不可见的。如果 zpos 小于
或等于 –fl，会出现问题，因此可以判断一下这个条件，并在下面这个 Perspective2.as 中
的 enterFrame 函数中进行处理（其余部分与 Perspective1.as 完全相同）：

private function onEnterFrame(event:Event):void {
if (zpos > -fl) {
   xpos = mouseX - vpX;
    ypos = mouseY - vpY;
   var scale:Number = fl / (fl + zpos);
   ball.scaleX = ball.scaleY = scale;
   ball.x = vpX + xpos * scale;
   ball.y = vpY + ypos * scale;
ball.visible = true;
} else {
ball.visible = false;
}
}

     注意，如果小球不可见，我们就不必考虑缩放和位置问题了。同样还要注意如果小球处
于可见的范围，就要确保它是可见的。虽然可能略些多余的设置，但这是必要的。
     好的，现在我们已经学习了 3D 基础的框架。不是很痛苦吧？一定要测试一下这个影
片，能够很好地掌握它。试改变 fl 的值，观察不同的效果。这就相当于在改变照相机的镜
头。较高的 fl 值就像一个长焦镜头，给我们一个较小的观察空间，以及较少的可见的透视。
较小的 fl 值将给我们一个广角镜头，形成非常广阔的透视。
     本章剩下的部分都是前面章节中介绍过的不同的运动效果，只不过这次是三维的

速度与加速度

实现 3D 的速度与加速度超级简单。对于 2D 而言，我们用 vx 和 vy 变量表示两个
轴的速度。现在只需要再加入 vz 表示第三个轴即可。同样，如果有 ax 和 ay 作为加速度，
那么再添加一个 az 变量即可。
     我们可以将最后一个例子改为小行星太空船这样的游戏，不过是 3D 版的。将它变为
全键盘控制的。方向键可以提供 x,y 轴上的推进，再加入一对儿键 Shift 和 Ctrl 用于 z 轴
上的推进。
     以下是代码（同样可在 Velocity3D.as 中找到）：
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
public class Velocity3D extends Sprite {
   private var ball:Ball;
   private var xpos:Number = 0;
   private var ypos:Number = 0;
   private var zpos:Number = 0;
   private var vx:Number = 0;
   private var vy:Number = 0;
   private var vz:Number = 0;
   private var friction:Number = .98;
   private var fl:Number = 250;
   private var vpX:Number = stage.stageWidth / 2;
   private var vpY:Number = stage.stageHeight / 2;
   public function Velocity3D() {
   init();
}

private function init():void {
ball = new Ball();
addChild(ball);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
}
private function onEnterFrame(event:Event):void {
xpos += vx;
ypos += vy;
zpos += vz;
vx *= friction;
vy *= friction;
vz *= friction;
if (zpos > -fl) {
   var scale:Number = fl / (fl + zpos);
   ball.scaleX = ball.scaleY = scale;
   ball.x = vpX + xpos * scale;
   ball.y = vpY + ypos * scale;
ball.visible = true;
} else {
ball.visible = false;
}

}
   private function onKeyDown(event:KeyboardEvent):void {
   switch (event.keyCode) {
    case Keyboard.UP :
     vy -= 1;
     break;
    case Keyboard.DOWN :
     vy += 1;
     break;
    case Keyboard.LEFT :
     vx -= 1;
     break;
    case Keyboard.RIGHT :
     vx += 1;
     break;
    case Keyboard.SHIFT :
     vz += 1;
     break;
    case Keyboard.CONTROL :
     vz -= 1;
     break;
    default :
     break;
   }

}
}
}
我们所要做的就是为每个轴加入速度和摩擦力。当六个键中有一个被按下，将会对速度
进行适当的增加或减少（记住加速度改变速度）。然后将速度加到每个轴上，最后计算摩擦
力。现在我们就有了带有加速度，速度和摩擦力的一个 3D 物体。哇，真是一举多得。说
过这很简单。

反弹
     本节我们将讨论平面反弹的问题--换句话讲，是与 x, y, z 轴充分结合的反弹，与 2D
的屏幕边界反弹相似。

单物体反弹
    3D 反弹，同样需要判断物体何时超出了边界，然后将物体调整到边界上，把相应轴上
的速度反转。3D 反弹唯一的不同之处在于如何确定边界。在 2D 中，一般都是用舞台的坐
标或其它一些可见的矩形区域。在 3D 中，就不那么简单了。这里没有真正的可见边界的
概念，除非在三维空间中绘制一个。我们将在下一章学习三维空间中的绘制，因此现在将在
不可见的随意放置的墙壁上进行反弹。
     我们设置的边界和以前相同，只不过现在要把它们放到三维空间中，也就意味着可以是
正的也可以是负的。还可以选择在 z 轴上设置边界。边界大概是这样：
private var top:Number = -250;

private var bottom:Number = 250;
private var left:Number = -250;
private var right:Number = 250;
private var front:Number = 250;
private var back:Number = -250;
     接下来，确定物体的新位置，需要判断是否所与这六个边界产生了碰撞。别忘了我们是
用物体一半的宽度来判断碰撞的，而这个值已经存在了 Ball 类名为 radius 的变量中。以
下是全部 3D 反弹的代码（可见 Bounce3D.as）：
package {
import flash.display.Sprite;
import flash.events.Event;
public class Bounce3D extends Sprite {
   private var ball:Ball;
   private var xpos:Number = 0;
   private var ypos:Number = 0;
   private var zpos:Number = 0;
   private var vx:Number = Math.random() * 10 - 5;
   private var vy:Number = Math.random() * 10 - 5;
   private var vz:Number = Math.random() * 10 - 5;
   private var fl:Number = 250;

private var vpX:Number = stage.stageWidth / 2;
   private var vpY:Number = stage.stageHeight / 2;
   private var top:Number = -100;
   private var bottom:Number = 100;
   private var left:Number = -100;
   private var right:Number = 100;
   private var front:Number = 100;
   private var back:Number = -100;
   public function Bounce3D() {
   init();
}
   private function init():void {
   ball = new Ball(15);
   addChild(ball);
   addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
   private function onEnterFrame(event:Event):void {
   xpos += vx;
   ypos += vy;
   zpos += vz;
     var radius:Number = ball.radius;
     if (xpos + radius > right) {
      xpos = right - radius;
    vx *= -1;

} else if (xpos - radius < left) {
      xpos = left + radius;
    vx *= -1;
   }
     if (ypos + radius > bottom) {
    ypos = bottom - radius;
    vy *= -1;
     } else if (ypos - radius < top) {
    ypos = top + radius;
    vy *= -1;
   }
     if (zpos + radius > front) {
       zpos = front - radius;
    vz *= -1;
     } else if (zpos - radius < back) {
    zpos = back + radius;
    vz *= -1;
   }
     if (zpos > -fl) {
      var scale:Number = fl / (fl + zpos);
      ball.scaleX = ball.scaleY = scale;
      ball.x = vpX + xpos * scale;
      ball.y = vpY + ypos * scale;
    ball.visible = true;
   } else {
    ball.visible = false;
   }
}

}
}
注意，我删掉了所有按键处理的部分，只让小球以随机的速度在每个轴上运动。现在可
以看到小球按照我们旨意进行反弹，但是谁也说不上来反弹在什么东西上——正如我所说
的，这些是任意放置不可见的边界。

多物体反弹
     让更多的物体充满整个空间也是对我们看出这些墙壁会有些帮助。为了完成这个目的，
需要很多 Ball 类的实例。每个实例都要有自己的 xpos, ypos, zpos 以及每个轴的速度。为
了让主类（main class）的结构清晰，下面创建了一个新的类 Ball3D，来看一下：
package {
import flash.display.Sprite;
public class Ball3D extends Sprite {
   public var radius:Number;
   private var color:uint;
   public var xpos:Number = 0;
   public var ypos:Number = 0;
   public var zpos:Number = 0;
   public var vx:Number = 0;
   public var vy:Number = 0;
   public var vz:Number = 0;
   public var mass:Number = 1;
   public function Ball3D(radius:Number=40, color:uint=0xff0000) {
   this.radius = radius;

this.color = color;
   init();
}
   public function init():void {
   graphics.beginFill(color);
   graphics.drawCircle(0, 0, radius);
   graphics.endFill();
}
}
}
     我们看到，这里所做的就是加入了每个轴的位置和速度的属性。同样，将类中的属性设
置为 public 实在不是一个好的面向对象程序设计的习惯，但是现在我们只是为了能够简单
地说明公式才这么做的。在 MultiBounce3D.as 中，创建了 50 个新类的实例。每个实例都
有自己的 xpos, ypos, zpos, vx,vy, vz。 onEnterFrame 方法循环获得每个 Ball3D 的引用，然
后将它们传给 move 方法。这个方法与最初的 onEnterFrame 完成的功能相同。代码如下（可
在 MultiBounce3D.as 中找到）：

package {
import flash.display.Sprite;
import flash.events.Event;
public class MultiBounce3D extends Sprite {
   private var balls:Array;
   private var numBalls:uint = 50;
   private var fl:Number = 250;
   private var vpX:Number = stage.stageWidth / 2;
   private var vpY:Number = stage.stageHeight / 2;
   private var top:Number = -100;
   private var bottom:Number = 100;
   private var left:Number = -100;
   private var right:Number = 100;
   private var front:Number = 100;
   private var back:Number = -100;
   public function MultiBounce3D() {
   init();
}

private function init():void {
   balls = new Array();
     for (var i:uint = 0; i < numBalls; i++) {
      var ball:Ball3D = new Ball3D(15);
    balls.push(ball);
      ball.vx = Math.random() * 10 - 5;
      ball.vy = Math.random() * 10 - 5;
      ball.vz = Math.random() * 10 - 5;
    addChild(ball);
   }
   addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
   private function onEnterFrame(event:Event):void {
     for (var i:uint = 0; i < numBalls; i++) {
    var ball:Ball3D = balls[i];

   move(ball);
   }
}
   private function move(ball:Ball3D):void {
     var radius:Number = ball.radius;
   ball.xpos += ball.vx;
   ball.ypos += ball.vy;
   ball.zpos += ball.vz;
     if (ball.xpos + radius > right) {
      ball.xpos = right - radius;
    ball.vx *= -1;
     } else if (ball.xpos - radius < left) {
      ball.xpos = left + radius;
    ball.vx *= -1;
   }
     if (ball.ypos + radius > bottom) {
      ball.ypos = bottom - radius;
    ball.vy *= -1;
     } else if (ball.ypos - radius < top) {
      ball.ypos = top + radius;
    ball.vy *= -1;

}
     if (ball.zpos + radius > front) {
      ball.zpos = front - radius;
    ball.vz *= -1;
     } else if (ball.zpos - radius < back) {
    ball.zpos = back + radius;
    ball.vz *= -1;
   }
     if (ball.zpos > -fl) {
    var scale:Number = fl / (fl + ball.zpos);
      ball.scaleX = ball.scaleY = scale;
      ball.x = vpX + ball.xpos * scale;
      ball.y = vpY + ball.ypos * scale;
    ball.visible = true;
   } else {
    ball.visible = false;
   }
}
}
}