show pictures on a sphere using Papervision3D 2.0

底下是採用 Papervision3D 2.0(GreatWhite)用來展示圖片在一顆球上的程式，galleries.xml 也附在後面當註解。

package
{
 import flash.display.BitmapData;
 import flash.display.Loader;
 import flash.display.Sprite;
 import flash.display.StageQuality;
 import flash.display.StageScaleMode;
 import flash.events.Event;
 import flash.events.KeyboardEvent;
 import flash.ui.Keyboard;
 import flash.net.URLLoader;
 import flash.net.URLRequest;

 import org.papervision3d.scenes.Scene3D;
 import org.papervision3d.view.Viewport3D;
 import org.papervision3d.cameras.Camera3D;
 import org.papervision3d.render.BasicRenderEngine;

 import org.papervision3d.materials.BitmapMaterial;
 import org.papervision3d.objects.DisplayObject3D;
 import org.papervision3d.objects.primitives.Plane;

 [SWF(width="640", height="480", frameRate="60")]

 public class Panorama extends Sprite
    {
  private var container  :Viewport3D;
  private var scene      :Scene3D;
  private var camera     :Camera3D;
  private var renderer    :BasicRenderEngine;

  private var assetArray :Array;

  private var cC   :Array;

  private var count    :Number;

  private var flying :DisplayObject3D;

  private var front:BitmapMaterial;
  private var back:BitmapMaterial;
  private var bottom:BitmapMaterial; 
  private var right:BitmapMaterial; 
  private var left:BitmapMaterial;
  private var top:BitmapMaterial;

  private var movementFactor:Number = 100;
  // set the key actions
  private var keyRight:Boolean = false;
  private var keyLeft:Boolean = false;
  private var keyForward:Boolean = false;
  private var keyBackward:Boolean = false;

  private var forwardFactor:Number = 0;
  private var sideFactor:Number = 0;
  private var inertia:Number = 5;

  public function Panorama()
  {
   stage.scaleMode = StageScaleMode.NO_SCALE;
   init3D();
   stage.quality = StageQuality.LOW;
  }

  private function init3D():void
  {
   container = new Viewport3D(640,480,false,true);
   scene = new Scene3D();
   camera = new Camera3D();

   container.buttonMode = true;
   addChild( container );
 
   renderer = new BasicRenderEngine();
   flying = new DisplayObject3D();
   var myurl:URLLoader = new URLLoader(new URLRequest("galleries.xml"));
   myurl.addEventListener(Event.COMPLETE, loadAssets);
  }

  private function loadAssets(event:Event):void
  {
   var loader:URLLoader = event.target as URLLoader;
   var xml:XML = XML(loader.data);

   count = 0;
   assetArray = new Array();
   for each (var pic:XML in xml..photo) {
    assetArray.push(pic.source);
   }

   loadOne();
  }
 
  private function loadOne():void
  {
   var loaD:Loader = new Loader();
   loaD.contentLoaderInfo.addEventListener(Event.COMPLETE, progfin);
   var urlreq:URLRequest = new URLRequest(assetArray[count]);
   loaD.load(urlreq);
  }

  private function progfin(e:Event):void
  {
   var bmm:BitmapData = e.target.content.bitmapData;
  
   count++;
   if(count < assetArray.length) {
    var doublePlane:DisplayObject3D = new DisplayObject3D();
    var frontPlane:Plane = new Plane(new BitmapMaterial(bmm));
    var rearPlane:Plane = new Plane(new BitmapMaterial(bmm));
    rearPlane.rotationY = 180;

    doublePlane.addChild(frontPlane);
    doublePlane.addChild(rearPlane);
  
    doublePlane.rotationX = Math.random() * 360;
    doublePlane.rotationY = Math.random() * 360;

    doublePlane.moveForward(1000);

    flying.addChild(doublePlane);

    loadOne();
   } else {
    createSphere();
    addEventListeners();
   };
  }
 
  private function createSphere():void
  {
   flying.z = 1000;
  
   scene.addChild( flying);
  }

  private function addEventListeners():void
  {
   addEventListener(Event.ENTER_FRAME, render);
   stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
   stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
   addEventListener(Event.ENTER_FRAME, onEnterFrame);
  }
 
  // if key is pressed do this event listerners pay attention to the key press
  private function onKeyDown(e:KeyboardEvent):void
  {
   switch(e.keyCode) {
    case "W" .charCodeAt():
    case Keyboard.UP:
    keyForward = true;
    keyBackward = false;
    break;
   
    case "S" .charCodeAt():
    case Keyboard.DOWN:
    keyForward = false;
    keyBackward = true;
    break;
   
    case "A" .charCodeAt():
    case Keyboard.LEFT:
    keyLeft = true;
    keyRight = false;
    break;
   
    case "D" .charCodeAt():
    case Keyboard.RIGHT:
    keyLeft = false;
    keyRight = true;
    break;
     
   }
  }
  
  // this second function  determines the keyup false
  private function onKeyUp(e:KeyboardEvent):void
  {
   switch(e.keyCode) {
    case "W" .charCodeAt():
    case Keyboard.UP:
    keyForward = false;
    break;
   
    case "S" .charCodeAt():
    case Keyboard.DOWN:
    keyBackward = false;
    break;
   
    case "A" .charCodeAt():
    case Keyboard.LEFT:
    keyLeft = false;
    break;
   
    case "D" .charCodeAt():
    case Keyboard.RIGHT:
    keyRight = false;
    break;
     
   }
  }
 
  private function onEnterFrame(e:Event):void
  {
   if (keyForward) {
    forwardFactor += 10;
   }
  
   if (keyBackward) {
    forwardFactor += -10;
   }
  
   if (keyLeft) {
    sideFactor += -10;
   }
  
   if (keyRight) {
    sideFactor += 10;
   }
  
   forwardFactor += ( 0 - forwardFactor ) / inertia;
   sideFactor += ( 0 - sideFactor ) / inertia;
  
   if ( forwardFactor > 0) { 
    camera.moveForward(forwardFactor);
   }else {
    camera.moveBackward( - forwardFactor );
   }
  
   if (sideFactor > 0) {
    camera.moveRight( sideFactor );
   }else {
    camera.moveLeft( -sideFactor );
   }  
  } 

  private function render(e:Event):void {
   renderer.renderScene(scene, camera, container);
   flying.yaw(1);
  }
 }
}
/* galleries.xml
<galleries>
  <photo>
    <source>pic.jpg</source>
  </photo>
  <photo>
    <source>text.jpg</source>
  </photo>
</galleries>
*/

using camera Adobe Papervision3D sphere 環境著球轉

最近想要建立 3D 的操作環境，安裝Flex Builder, 後來也找到Papervision3D，前者是 Adobe 的 Flash Integrated developing environment，後者是 based on actionscript for flash的 3D library, 顧名思義，用來在 "paper" 的視野上建立 3D 的運作，還算不錯，而且是 open source, 將來有機會也拿來應用在 mozilla 上，例如採用 Javascript + SVG|OpenGL|Canvas 上。

下面是一段移動 camera 環繞著球面轉動的運作的步驟：

1. Determine yAngle, the angle by which you want to rotate the camera up
2. Determine xAngle, the angle by which you want to rotate the camera right
3. Determine cameraDistance, the distance the camera is from the center of the sphere
4. Move the camera to the center of the sphere using the moveForward function: camera.moveForward(cameraDistance)
5. Tilt the camera up: camera.tilt(yAngle)
6. Pan the camera right: camera.pan(xAngle)
7. Move the camera back using the moveBackward function:
camera.moveBackward(cameraDistance)