新手学习Papervision3D GreatWhite 2.0

新手学习Papervision3D GreatWhite 2.0

构建一个Papervision3D场景，你需要记住几个关键的类：Scene3D, Viewport3D, Camera3D 和 BasicRenderEngine，他们是这个核心的基础。在这系文章的下一篇，还将介绍Papervision3D 2.0的另一个类：BasicView，它将上面几个基础核心类都整合在一起，使用她可以让你更快更方便的创建一个3D应用。不过现在要讲的仍然是基础的构建方法。

Example001.as
这个例子只绘制了一个线框贴图的球体和X、Y、Z 3根坐标轴，通过这个例子很好的说明的一个3D场景是如何建立的。
复制内容到剪贴板代码:
package {
  import flash.display.Sprite;
  import flash.display.StageAlign;
  import flash.display.StageScaleMode;
  import flash.events.Event;
  import org.papervision3d.cameras.Camera3D;
  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.DisplayObject3D;
  import org.papervision3d.objects.primitives.Sphere;
  import org.papervision3d.render.BasicRenderEngine;
  import org.papervision3d.scenes.Scene3D;
  import org.papervision3d.view.Viewport3D;
  public class Example001 extends Sprite {
    private var scene:Scene3D;
    private var camera:Camera3D;
    private var viewport:Viewport3D;
    private var renderer:BasicRenderEngine;
    public function Example001() {
      // set up the stage
      stage.align = StageAlign.TOP_LEFT;
      stage.scaleMode = StageScaleMode.NO_SCALE;
      // Initialise Papervision3D
      init3D();
      // Create the 3D objects
      createScene();
      // Initialise Event loop
      this.addEventListener(Event.ENTER_FRAME, loop);
    }
    private function init3D():void {
      // create viewport
      viewport = new Viewport3D(0, 0, true, false);
      addChild(viewport);
      // Create new camera with fov of 60 degrees (= default value)
      camera = new Camera3D(60);
      // initialise the camera position (default = [0, 0, -1000])
      camera.x = -100;
      camera.y = -100;
      camera.z = -500;
      // target camera on origin
      camera.target = DisplayObject3D.ZERO;
      // Create a new scene where our 3D objects will be displayed
      scene = new Scene3D();
      // Create new renderer
      renderer = new BasicRenderEngine();
    }
    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
      var sphere:Sphere = new Sphere(sphereMaterial, 50, 10, 10);
      // Position the sphere (default = [0, 0, 0])
      sphere.x = -100;
      // 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);
    }
    private function loop(event:Event):void {
      // Render the 3D scene
      renderer.renderScene(scene, camera, viewport);
    }
  }
}
当代码执行以后，你会看到一个线框球和3根坐标轴，下面解释一下

初始化Stage
留意Example001.as中的代码：
复制内容到剪贴板代码:
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
第一行的意思是，当影片输出的时候，整个影片相对浏览器的左上方对齐。第二行的意思是，影片不会跟随浏览的尺寸大小而发生缩放。
复制内容到剪贴板代码:
this.addEventListener(Event.ENTER_FRAME, loop);
这一行的意思是为场景注册一个事件监听器，每当场景ENTER_FRAME的时候，就执行一次loop函数，ENTER_FRAME的频率就是输出影片时设置的每秒帧数。

初始化3D场景
初始化3D场景依赖3个关键的类，前文已经提到过：Scene3D, Viewport3D and Camera3D

首先创建一个Viewport3D 实例并通过addChild加入到场景的显示节点内。Viewport3D 用来将3D场景内计算出来的3维图象映射到flash的2维平面。他就相当于我们的显示器，在玩3D游戏的时候，我们看到游戏里面的画面是3维的，但是很明显你的液晶显示屏是个平面，这是视觉错觉让你觉得他是3维的，3D引擎的作用的就是产生这个视觉错觉。
复制内容到剪贴板代码:
viewport = new Viewport3D(0, 0, true, false);
addChild(viewport);
Viewport3D类的前2个参数指示这个构建出来的窗口尺寸。如果将他们都设为0，则Papervision3D默认使用整个stage的尺寸大小来构建这个窗口。第3个参数则指示当舞台的大小发生变化时候Viewport3D是否reSize。最后一个参数指示构建出来的这个窗口是否响应鼠标交互事件，关于交互以后会讲到。

接下来要创建一个摄像机，你可以想象一下通过Viewport3D看到的画面都是由这个摄像机拍摄下来的，摄像机可以设置一些参数，比如放大倍数，焦距，XYZ位于空间的位置。
复制内容到剪贴板代码:
// Create new camera with fov of 60 degrees (= default value)
camera = new Camera3D(60);
// initialise the camera position (default = [0, 0, -1000])
camera.x = -100;
camera.y = -100;
camera.z = -500;
// target camera on origin
camera.target = DisplayObject3D.ZERO;
这里我们创建了一个摄像机，他的视角为60度（默认值），控制位置为[-100, -100, -500]，摄像机的默认观察对象为舞台的[0, 0, 0]点。

最后需要创建一个Scene3D 和一个 BasicRenderEngine
复制内容到剪贴板代码:
// Create a new scene where our 3D objects will be displayed
scene = new Scene3D();
// Create new renderer
renderer = new BasicRenderEngine();
所有被创建且需要显示在场景上的3D物体，都需要addChild到Scene3D的显示列表里，这点和flash的addChild很像。BasicRenderEngine则是用来计算每一个画面该显示什么内容。

看，构建一个PV3D的世界很简单是吗？（其实还有一个更简单的方法，通过BasicView类。在下一篇会讲到）

创建一个3D Object到舞台
下一步，在舞台上加入2个简单的3D Object，一个用线框贴图的球体，3条有不同颜色并指示坐标轴方位的线。

球体是Papervision3D 的一个基本物体，所以你不需要知道关于写一个球体的代码是怎么样的，你只需要new 一个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
var sphere:Sphere = new Sphere(sphereMaterial, 50, 10, 10);
// Position the sphere (default = [0, 0, 0])
sphere.x = -100;
这里出现了一个新东西：material（材质）。在Papervision3D 的世界，任何一个需要被显示的物体，都需要关联一个材质。将材质贴在一个物体上，你才能实实在在的看到他。就像一个气球，如果气球的表皮破了，里面的空气你是看不到的。在Papervision3D 里，如果你细心留意一下org/papervision3d/materials，你会发现里面有很多种生成材质的类。在这个例子里，使用了一个白色线框材质用来做贴图。

在这个例子里，创建球体时指定了4个参数，第1个是球体的贴图材质，第2个是球体的半径，第3个是球体横向分隔度，第4个是球体的纵向分隔度。修改这些参数来体会他们代表的意义是个学习的好方法。

接下来是创建线体
复制内容到剪贴板代码:
// 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);
这些线是由Line3D 类创建的，创建完后这些线要一起加入到一个Lines3D 组里。

当球体和线都创建好了以后，就可以将他们加入到Scene3D的显示列表里。
复制内容到剪贴板代码:
// Add the sphere and the lines to the scene
scene.addChild(sphere);
scene.addChild(axes);
现在我们初始化好了3D环境，创建好了3D Object，只剩最后一步渲染了。

渲染场景
这里我们用之前创建的BasicRendererEngine 配合每个enterframe都会执行的loop函数来渲染场景。
复制内容到剪贴板代码:
// Render the 3D scene
renderer.renderScene(scene, camera, viewport);
BasicRendererEngine 关联住scene, camera, viewport 后，会通过计算将3D 内容转换成2D 画面显示出来。