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

Z  排序
     在添加了多个物体后代码中显现出了一个新问题---称为z  排序。Z  排序就像它的名
字一样：物体如何在 z  轴上进行排序，或者说哪个物体在前面。由于物体都使用纯色，所
以看起来不是很明显。为了让效果更加明显，请将 Ball3D  的 init  方法改为以下代码，并
运行刚才那个程序：
public function init():void {
 graphics.lineStyle(0);
 graphics.beginFill(color);
  graphics.drawCircle(0, 0, radius);
 graphics.endFill();
}

     通过给小球添加轮廓线，我们就可以看出哪个小球在前面了。这几乎毁掉了整个 3D  效
果，因为现在较小的物体出现在了较大物体的前面。Z  排序就是用来解决这个问题的，但
不是自动的。Flash  不知道我们在模拟 3D。它只知道我们在移动和缩放影片。它也不知道
我们到底是使用左手还是右手坐标系。在小球远离时应该将这个小球放在相邻小球的后面。
Flash  只根据在显示列表中的相对索引进行排序。在 AS 2 中，z  排序只需要改变影片剪辑
的深度即可完成。swapDepths(深度)。深度较高的影片剪辑出现在深度较低的影片的前面。
然而在 AS 3  中，操作会稍微有些复杂。对于显示列表没有可以任意修改的深度值。显示列
表的作用更像是与个数组。列表中的每个显示对象都有一个索引。索引从 0  开始，直到列
表中所有对象的个数。例如，假设在类中加入三个影片 A, B, C。它们的索引应该是 0, 1, 2。
无法将其中的一个影片的索引设置为 100，或 -100。如果已经删除了 B 影片，那么这时 A
和 C  影片的索引应该是 0  和 1。明白了吧，在显示列表中永远没有“空间”这个概念
     根据深度，索引 0  是最低的，任何深度较高的显示对象都将出现在这个较低对象的前
面。我们可以用几种不同的方法来改变物体的深度：
■ setChildIndex(child:DisplayObject, index:int) 给对象指定索引值（index）。
■ swapChildren(child1:DisplayObject, child2:DisplayObject) 交换两个指定的对象。
■ swapChildrenAt(index1:int, index2:int)  交换两个指定的深度。
使用 setChildIndex 是最简单的。因为我们已经有了一个 balls 数组。可以根据小球的 z 轴
深度从高到低来排序这个数组，然后从 balls 的 0（最远的）  到 49（最近的）为每个小球
设置索引。请看下面这段代码：

private function sortZ():void {
 balls.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
  for (var i:uint = 0; i < numBalls; i++) {
   var ball:Ball3D = balls[i];
  setChildIndex(ball, i);
 }

}
     根据数组中每个对象的 zpos  属性对该数组进行排序。因为指定了数组的
DESCENDING  和 Array.NUMERIC，则是按数值大小反向排序的——换句话讲，就是从高
到低。结果会使最远的小球（zpos  值最高的）将成为数组中的第一个，最近的将成为最后
一个。
     然后循环这个数组，将每个小球在显示列表中的索引值设置为与当前在数组中的索引值
相同。
     将这个方法放入类中，只需要在小球移动后调用它即可，将函数调用放在 onEnterFrame
方法的最后：

private function onEnterFrame(event:Event):void {
  for (var i:uint = 0; i < numBalls; i++) {
   var ball:Ball3D = balls[i];
  move(ball);
 }
 sortZ();
}
     剩下的代码与上一个例子中的相同。全部代码可在 Zsort.as  中找到。
 

 

重力
     这里我们所说的重力就像地球表面上的重力一样，如第五章所讲的。既然这样 3D 的
重力和 2D  的就很像了。我们所需要做的就是选择一个施加在物体上的重力值，并在每帧
中将它加入到物体的速度中。
     由于 3D  的重力非常简单，我差点就跳过去说“是的，同 2D  一样。OK，下一话题。”
但是，我决定将它放到一个很好的例子中加以解释，让大家知道即使很简单的东西也可以创
造出非常棒的效果，就像 3D  烟火一样。
     首先，我们需要找个物体代表一个单独的“烟火”——我们知道，这些发光的点可以组
合到一起形成巨大的爆炸。我们给忠实的 Ball3D  类一个较小的半径值，就可以完成这个目
的。只要给每个小球一个随机的颜色效果就会非常漂亮。如果将背景色设置为黑色就更好了。
我使用 SWF  元数据来完成这个设置，但如果是在 Flash CS3 IDE  中，只需要简单地改变
一下文档属性的背景色即可。
     我确信大家现在一定能够完成。先将所有的代码列出来（Fireworks.as），随后加以解释。

package {
 import flash.display.Sprite;
 import flash.events.Event;
 [SWF(backgroundColor=0x000000)];
  public class Fireworks extends Sprite {
   private var balls:Array;
   private var numBalls:uint = 100;
   private var fl:Number = 250;
   private var vpX:Number = stage.stageWidth / 2;
   private var vpY:Number = stage.stageHeight / 2;
   private var gravity:Number = 0.2;
   private var floor:Number = 200;
   private var bounce:Number = -0.6;
   public function Fireworks() {
   init();
  }

 private function init():void {
  balls = new Array();
   for (var i:uint = 0; i < numBalls; i++) {
    var ball:Ball3D = new Ball3D(3, Math.random() * 0xffffff);
   balls.push(ball);
   ball.ypos = -100;
    ball.vx = Math.random() * 6 - 3;
    ball.vy = Math.random() * 6 - 6;
    ball.vz = Math.random() * 6 - 3;
   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);
  }
  sortZ();
 }

 private function move(ball:Ball3D):void {
  ball.vy += gravity;
  ball.xpos += ball.vx;
  ball.ypos += ball.vy;
  ball.zpos += ball.vz;
   if (ball.ypos > floor) {
   ball.ypos = floor;
   ball.vy *= bounce;
  }
   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;
  }
 }
 private function sortZ():void {
  balls.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
   for (var i:uint = 0; i < numBalls; i++) {
   var ball:Ball3D = balls[i];
   setChildIndex(ball, i);

  }
  }
 }
}
     首先加入一些属性：gravity, bounce, floor。前两个大家都见过。Floor  属性就是  --

bottom --也就是物理反弹之前可以运动到的 y 值。除了增加 y  轴速度以及碰撞地
面后的反弹以外，所有的内容我们前面都介绍过，是不是越来越酷了，哈？
     运行结果如图 15-6 所示。

图 15-6  烟火（相信我，运动中的效果更好）

屏幕环绕
     回忆一下第六章，我们说过三种当物体碰到边界后受到反作用力的可能。目前为
们只介绍了反弹。还有两个：屏幕环绕与重置。对于 3D  而言，我发现屏幕环绕效果是最
为有用的，但只能在 z 轴上使用。
    2D  屏幕环绕中，在 x  或 y  轴上判断物体是否出了屏幕。效果非常好，因为当物体超
出了其中一个边界时就看不到它了，因此可以轻松地重新设置物体的位置，不会引起人们的
注意。但是 3D  中就不能这么潇洒了。
     在 3D  中，实际上只有两个点可以安全地删除和重置物体。一个就是当物体运动到观
察点的后面。前面例子中，将物体设置为不可见时，就是这个道理。另一个就是当物体的距
离太远和太小时也可以将其设为不可见的。这就意味着我们可以在 z  轴上安全地进行屏幕
包装。当物体走到身后时，就将它放到面前的远方。如果物体离得过远，超出了可见范围，
就可以删除它并将其重置到身后。如果大家喜欢 x, y  轴也可以这样做，但是多数情况下，
这么做会导致一些不自然的忽隐忽现的效果。
     还好 z 轴的环绕可以是相当常用的。我曾用它制作出真实的 3D 赛车游戏，下面我们
就来制作其中的一部分。
     主体思想是把不同的 3D  物体放到观察点前。然后将这些物体向观察点移动。换句话
讲，给它们一些负的 z  速度。这要看我们如何设置了，可以让物体向我们走来，让眼睛以
为是我们向物体走去。一旦物体走到了观察点后，就将它重置到眼前一段距离。这样就可以
永无止境地掠过这些物体了。
     本例中使用的物体是一棵线条化的树。创建一棵带有随机枝叉的树形结构。我确信
能做得更好！
     绘制树的代码放在名为 Tree  的类中，下面会看到，用三个位置属性以及随机绘制树枝
的代码来代表一颗树。

 

package {
 import flash.display.Sprite;
  public class Tree extends Sprite {
   public var xpos:Number = 0;
    public var ypos:Number = 0;
   public var zpos:Number = 0;
   public function Tree() {
   init();
  }
   public function init():void {
   graphics.lineStyle(0, 0xffffff);
     graphics.lineTo(0, -140 - Math.random() * 20);
     graphics.moveTo(0, -30 - Math.random() * 30);
     graphics.lineTo(Math.random() * 80 - 40,
     -100 - Math.random() * 40);
     graphics.moveTo(0, -60 - Math.random() * 40);
     graphics.lineTo(Math.random() * 60 - 30,
     -110 - Math.random() * 20);
  }
 }
}

  同样，还是使用 SWF  元数据将背景色设置为黑色。大家可以创建任何喜欢的物体，
想要多复杂都可以自行设置。在文档类中创建所有的树（100  左右）。随机分散在 x  轴上，
每个方向 1000  像素。它们同样随机分散到 z  轴上，从 0  到 10000。它们都以 floor  属性
为基础，具有相同的 y 坐标，给人一种地平面的感觉。
     以下是代码（可以见 Trees.as）：
Here’s the code (which you can also find in Trees.as):
package {
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.KeyboardEvent;
 import flash.ui.Keyboard;
 [SWF(backgroundColor=0x000000)];
  public class Trees extends Sprite {
   private var trees:Array;
   private var numTrees:uint = 100;
   private var fl:Number = 250;
   private var vpX:Number = stage.stageWidth / 2;
   private var vpY:Number = stage.stageHeight / 2;
   private var floor:Number = 50;
   private var vz:Number = 0;
   private var friction:Number = 0.98;

 public function Trees() {
  init();
 }
 private function init():void {
  trees = new Array();
   for (var i:uint = 0; i < numTrees; i++) {
   var tree:Tree = new Tree();
   trees.push(tree);
     tree.xpos = Math.random() * 2000 - 1000;
   tree.ypos = floor;
   tree.zpos = Math.random() * 10000;

    addChild(tree);
   }
   addEventListener(Event.ENTER_FRAME, onEnterFrame);
   stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
  }
   private function onEnterFrame(event:Event):void {
     for (var i:uint = 0; i < numTrees; i++) {
    var tree:Tree = trees[i];
    move(tree);
   }
   vz *= friction;
   sortZ();
  }
   private function onKeyDown(event:KeyboardEvent):void {
     if (event.keyCode == Keyboard.UP) {
    vz -= 1;
     } else if (event.keyCode == Keyboard.DOWN) {
    vz += 1;
   }
  }
   private function move(tree:Tree):void {

   tree.zpos += vz;
     if (tree.zpos < -fl) {
    tree.zpos += 10000;
   }
     if (tree.zpos > 10000 - fl) {
    tree.zpos -= 10000;
   }
     var scale:Number = fl / (fl + tree.zpos);
     tree.scaleX = tree.scaleY = scale;
     tree.x = vpX + tree.xpos * scale;
     tree.y = vpY + tree.ypos * scale;
   tree.alpha = scale;
  }
   private function sortZ():void {
   trees.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
     for (var i:uint = 0; i < numTrees; i++) {
    var tree:Tree = trees[i];
    setChildIndex(tree, i);
   }
  }
 }
}

  请注意，这里只有一个 z 轴速度变量，因为树不需要在 x 或 y  轴上进行移动，所有
的移动都在 z  轴上。在 onEnterFrame 方法中，判断方向键上和下，增加或减少 vz。加入
一点点摩擦力让速度不会增加到无限大，在按键松开时将速度降下来。
     代码循环获得每棵树，用当前 z  速度更新该树的 z  坐标。然后判断这棵树是否走到了
我们的身后。如果是，将这个棵树向 z 轴内移动 10000  像素。否则，如果超过了 10000  –
fl，就将该树往回移动 10000  像素。再执行标准透视动作。为了更好地加强立体感我还加

入了一个小小的设计：
    tree.alpha = scale;
根据 z  轴的深度设置树的透明度。离得越远颜色越淡。这是大气透视，模拟大气与观察者
和物体之间的效果。这是本例中表现物体远离时一种特殊效果。这个特殊的设计给了我们黑
暗的效果和幽深的夜。大家也许可以试试这种方法：
       tree.alpha = scale * .7 + .3;
让树的可见度至少为 30%。看上去不再那么朦胧。这里没有正确或错误可言--只有不同
的数值创造不同的效果。
    大家也许注意到了，我仍把 z 排序方法留在这里。在这个特殊的例子中，它没有发挥
本应有的作用，因为树都是由同一颜色的简单线条构成的，但如果绘制的是一些非常复杂的
或重叠的图形，那么它的存在就是至关重要的了。
     本文件的运行结果  15-7  所示。

图 15-7  当心小树！
     下面我将给大家一个加强的例子，让我们看一下还可以做到什么样的程度。以下是程
（可以在 Trees2.as  中找到）：
package {
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.KeyboardEvent;
 import flash.ui.Keyboard;
 [SWF(backgroundColor=0x000000)];
  public class Trees2 extends Sprite {
   private var trees:Array;
   private var numTrees:uint = 100;
   private var fl:Number = 250;
   private var vpX:Number = stage.stageWidth / 2;
   private var vpY:Number = stage.stageHeight / 2;
   private var floor:Number = 50;
   private var ax:Number = 0;

   private var ay:Number = 0;
   private var az:Number = 0;
   private var vx:Number = 0;
    private var vy:Number = 0;
   private var vz:Number = 0;
   private var gravity:Number = 0.3;
   private var friction:Number = 0.98;
   public function Trees2() {
   init();
  }
   private function init():void {
   trees = new Array();
     for (var i:uint = 0; i < numTrees; i++) {
    var tree:Tree = new Tree();
    trees.push(tree);
       tree.xpos = Math.random() * 2000 - 1000;
    tree.ypos = floor;
    tree.zpos = Math.random() * 10000;
    addChild(tree);
   }

   addEventListener(Event.ENTER_FRAME, onEnterFrame);
   stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
   stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
  }
   private function onEnterFrame(event:Event):void {
   vx += ax;
   vy += ay;
   vz += az;
   vy -= gravity;
     for (var i:uint = 0; i < numTrees; i++) {
    var tree:Tree = trees[i];
    move(tree);
   }
   vx *= friction;
   vy *= friction;
   vz *= friction;
   sortZ();
  }
   private function onKeyDown(event:KeyboardEvent):void {
   switch (event.keyCode) {
    case Keyboard.UP :

   az = -1;
     break;
    case Keyboard.DOWN :
     az = 1;
     break;
    case Keyboard.LEFT :
     ax = 1;
     break;
    case Keyboard.RIGHT :
     ax = -1;
     break;

   case Keyboard.SPACE :
     ay = 1;
     break;
    default :
     break;
   }
  }
   private function onKeyUp(event:KeyboardEvent):void {
   switch (event.keyCode) {
    case Keyboard.UP :
    case Keyboard.DOWN :
     az = 0;
     break;
    case Keyboard.LEFT :
    case Keyboard.RIGHT :
     ax = 0;
     break;
    case Keyboard.SPACE :
     ay = 0;
     break;

  default :
     break;
   }
  }
   private function move(tree:Tree):void {
   tree.xpos += vx;
   tree.ypos += vy;
   tree.zpos += vz;
     if (tree.ypos < floor) {
    tree.ypos = floor;
   }
     if (tree.zpos < -fl) {
    tree.zpos += 10000;
   }
     if (tree.zpos > 10000 - fl) {
    tree.zpos -= 10000;
   }
     var scale:Number = fl / (fl + tree.zpos);
     tree.scaleX = tree.scaleY = scale;

   tree.x = vpX + tree.xpos * scale;
   tree.y = vpY + tree.ypos * scale;
  tree.alpha = scale;
 }
 private function sortZ():void {
  trees.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
   for (var i:uint = 0; i < numTrees; i++) {
   var tree:Tree = trees[i];
   setChildIndex(tree, i);
  }

  }
 }
}
     这里，我已经加入了 x  和 y 轴的速度，还有重力。还必需要能够捕获多个按键。我唯
一想念 AS 2  的是 Key.isDown()  方法，任何时间都可以调用找出某个键是否被按住。因为
在 AS 3  中我们只能知道最后一次按下或释放的键，所以不得不判断哪个键被按下并设置相
应轴上的加速度为 1  或 -1。随后，当该键被松开时，再将加速度设回 0。在 onEnterFrame
的开始就将每个轴上的加速度加到相应轴的速度中。左键和右键显然就是用于选择 x  轴的
速度，使用空格键操作 y  轴。有趣的一点是我们实际是从 vy  减去了重力。因为我想要一
个类似于观察者落到树林中的效果，如图 15-8  所示。注意我们同样也限定了树的 y  坐标
为 50，看起来就像是站在陆地上一样。

图 15-8  看，我在飞！
     这里没有对 x  轴的运动加以任何的限制，也就意味着可以在树林边上行进。要想加入
限制对于大家来说也不是件难事，但是作为一个启发性的例子做到这里已经足够了。
缓动与弹性运动
     在 3D 中的缓动与弹性运动不会比 2D  中的难多少（第八章的课题）。我们只需为 z
轴再加入一至两个变量。

 

 
缓动
     对于缓动的介绍不算很多。在 2D  中，我们用 tx  和 ty 最为目标点。现在只需要再在
z  轴上加入 tz。每帧计算物体每个轴到目标点的距离，并移动一段距离。
     让我们来看一个简单的例子，让物体缓动运动到随机的目标点，到达该点后，再选出另
一个目标并让物体移动过去。注意后面两个例子，我们又回到了 Ball3D  这个类上。以下是
代码（可以在 Easing3D.as  中找到）：
package {
 import flash.display.Sprite;
 import flash.events.Event;
  public class Easing3D extends Sprite {
   private var ball:Ball3D;
   private var tx:Number;
   private var ty:Number;
   private var tz:Number;
   private var easing:Number = .1;
   private var fl:Number = 250;
   private var vpX:Number = stage.stageWidth / 2;

   private var vpY:Number = stage.stageHeight / 2;
   public function Easing3D() {
   init();
  }
   private function init():void {
   ball = new Ball3D();
   addChild(ball);
     tx = Math.random() * 500 - 250;
     ty = Math.random() * 500 - 250;
     tz = Math.random() * 500;
   addEventListener(Event.ENTER_FRAME, onEnterFrame);
  }
   private function onEnterFrame(event:Event):void {
     var dx:Number = tx - ball.xpos;
     var dy:Number = ty - ball.ypos;
     var dz:Number = tz - ball.zpos;
   ball.xpos += dx * easing;
   ball.ypos += dy * easing;
     ball.zpos += dz * easing;
     var dist:Number = Math.sqrt(dx*dx + dy*dy + dz*dz);

     if (dist < 1) {
       tx = Math.random() * 500 - 250;
       ty = Math.random() * 500 - 250;
       tz = Math.random() * 500;
   }
     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;
   }
  }
 }
}
代码中最有趣的地方是下面这行：

      var dist:Number = Math.sqrt(dx * dx + dy * dy + dz * dz);
我们知道，在 2D  中计算两点间距离的方程是：
      var dist:Number = Math.sqrt(dx * dx + dy * dy);
在 3D  距离中，只需要将第三个轴距离的平方加入进去。由于这个公式过于简单所以我
常会受到质疑。在加入了一个条件后，似乎应该使用立方根。但是它并不是用在这里的。
 
 
 
弹性运动
     弹性运动是缓动的兄弟，需用相似的方法将其调整为 3D  的。我们只使用物体到目标
的距离改变速度，而不是改变位置。给大家一个快速的示例。本例中（Spring3D.as），点击

鼠标将创建出一个随机的目标点。
package {
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.MouseEvent;
  public class Spring3D extends Sprite {
   private var ball:Ball3D;
   private var tx:Number;
   private var ty:Number;
   private var tz:Number;
   private var spring:Number = .1;
   private var friction:Number = .94;
   private var fl:Number = 250;
   private var vpX:Number = stage.stageWidth / 2;
   private var vpY:Number = stage.stageHeight / 2;
   public function Spring3D() {
   init();
  }

   private function init():void {
   ball = new Ball3D();
   addChild(ball);
     tx = Math.random() * 500 - 250;
     ty = Math.random() * 500 - 250;
     tz = Math.random() * 500;
   addEventListener(Event.ENTER_FRAME, onEnterFrame);
   stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
  }
   private function onEnterFrame(event:Event):void {
     var dx:Number = tx - ball.xpos;
     var dy:Number = ty - ball.ypos;
     var dz:Number = tz - ball.zpos;
     ball.vx += dx * spring;
     ball.vy += dy * spring;
     ball.vz += dz * spring;
   ball.xpos += ball.vx;
   ball.ypos += ball.vy;
   ball.zpos += ball.vz;
   ball.vx *= friction;
   ball.vy *= friction;
   ball.vz *= friction;

   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;
  }

  }
   private function onMouseDown(event:MouseEvent):void {
     tx = Math.random() * 500 - 250;
     ty = Math.random() * 500 - 250;
     tz = Math.random() * 500;
  }
 }
} 
 

（如果要转载请注明出处http://blog.sina.com.cn/jooi，谢谢）