Papervision3D GreatWhite 2.0基础教程：第三篇 – 运动

前面两篇文章已经介绍了如何创建一个简单的3D场景，现在来给他加入一些动画效果。要让PV3D的场景展现动画效果，需要修改他的渲染函数，在Example001 里直接修改Event.FRAME_ENTER 事件，在Example002 里需要重载BasicView 里的onRenderTick 函数。

接下来的例子还会继续使用BasicView 类，因为他比较方便。

package {

  import flash.display.StageAlign;
  import flash.display.StageScaleMode;
  import flash.events.Event;

  import org.papervision3d.core.geom.Lines3D;
  import org.papervision3d.core.geom.renderables.Line3D;
  import org.papervision3d.core.geom.renderables.Vertex3D;
  import org.papervision3d.core.proto.MaterialObject3D;
  import org.papervision3d.materials.WireframeMaterial;
  import org.papervision3d.materials.special.LineMaterial;
  import org.papervision3d.objects.primitives.Sphere;
  import org.papervision3d.view.BasicView;

  public class Example003 extends BasicView {

    private static const ORBITAL_RADIUS:Number = 200;

    private var sphere:Sphere;
    private var theta:Number = 0;

    public function Example003() {
      super(0, 0, true, false);

      // set up the stage
      stage.align = StageAlign.TOP_LEFT;
      stage.scaleMode = StageScaleMode.NO_SCALE;

      // Initialise Papervision3D
      init3D();

      // Create the 3D objects
      createScene();

      // Start rendering the scene
      startRendering();
    }

    private function init3D():void {

      // position the camera
      camera.x = -200;
      camera.y =  200;
      camera.z = -500;
    }

    private function createScene():void {

      // First object : a sphere

      // Create a new material for the sphere : simple white wireframe
      var sphereMaterial:MaterialObject3D = new WireframeMaterial(0xFFFFFF);

      // Create a new sphere object using wireframe material, radius 50 with
      //   10 horizontal and vertical segments
      sphere = new Sphere(sphereMaterial, 50, 10, 10);

      // Position the sphere (default = [0, 0, 0])
      sphere.x = -ORBITAL_RADIUS;

      // Second object : x-, y- and z-axis

      // Create a default line material and a Lines3D object (container for Line3D objects)
      var defaultMaterial:LineMaterial = new LineMaterial(0xFFFFFF);
      var axes:Lines3D = new Lines3D(defaultMaterial);

      // Create a different colour line material for each axis
      var xAxisMaterial:LineMaterial = new LineMaterial(0xFF0000);
      var yAxisMaterial:LineMaterial = new LineMaterial(0x00FF00);
      var zAxisMaterial:LineMaterial = new LineMaterial(0x0000FF);

      // Create a origin vertex
      var origin:Vertex3D = new Vertex3D(0, 0, 0);

      // Create a new line (length 100) for each axis using the different materials and a width of 2.
      var xAxis:Line3D = new Line3D(axes, xAxisMaterial, 2, origin, new Vertex3D(100, 0, 0));
      var yAxis:Line3D = new Line3D(axes, yAxisMaterial, 2, origin, new Vertex3D(0, 100, 0));
      var zAxis:Line3D = new Line3D(axes, zAxisMaterial, 2, origin, new Vertex3D(0, 0, 100));

      // Add lines to the Lines3D container
      axes.addLine(xAxis);
      axes.addLine(yAxis);
      axes.addLine(zAxis);

      // Add the sphere and the lines to the scene
      scene.addChild(sphere);
      scene.addChild(axes);
    }

    override protected function onRenderTick(event:Event=null):void {

      // rotate the sphere
      sphere.yaw(-4);

      // change the position of the sphere
      theta += 3;
      var x:Number = - Math.cos(theta * Math.PI / 180) * ORBITAL_RADIUS;
      var z:Number =   Math.sin(theta * Math.PI / 180) * ORBITAL_RADIUS;
      sphere.x = x;
      sphere.z = z;

      // call the renderer
      super.onRenderTick(event);
    }

  }
}

输出影片会发现之前例子中的球体和坐标线，但是因为我们已经加入了动画效果，所以会发现球体会分别饶着自己和坐标原点的Z轴做圆周转动。（点击图片可以看到这个例子）

对比Example002 中的代码，会发现大部分几乎是一样的，唯一不同的地方来自渲染函数onRenderTick

override protected function onRenderTick(event:Event=null):void {

      // rotate the sphere
      sphere.yaw(-4);

      // change the position of the sphere
      theta += 3;
      var x:Number = - Math.cos(theta * Math.PI / 180) * ORBITAL_RADIUS;
      var z:Number =   Math.sin(theta * Math.PI / 180) * ORBITAL_RADIUS;
      sphere.x = x;
      sphere.z = z;

      // call the renderer
      super.onRenderTick(event);
    }

产生动画效果仍然是很简单的事情，只需要修改3D Object的坐标，旋转参数既可。关于一个3D Object究竟有多少参数可以设置，就细心查看Papervision3D 的API文档吧。学会看API文档也是学习的一个很重要步骤。Papervision3D 的API文档在googlecode可以下载到。