Saturday, 19 November 2011

Panoramic photo in Sphere with Away3D

I will provide a quick example of a panoramic sphere in Away3D 3.6. The sphere will contain a 360 degree panoramic photo to be applied to the material of the sphere. A hover camera will then be placed inside the sphere. You can use the mouse to click and drag to pan the camera around the sphere.

package { 
 import flash.events.MouseEvent;
 import away3d.cameras.HoverCamera3D;
 import away3d.materials.BitmapFileMaterial;
 import away3d.primitives.Sphere;
 import away3d.containers.View3D;
 import away3d.containers.Scene3D;

 import flash.display.*;
 import flash.events.Event;

 [SWF(backgroundColor="#ffffff", frameRate="60", quality="HIGH", width="800", height="600")]
 
 public class Main extends Sprite 
 {
  private static var IMAGE_URL:String = "360photo.jpg"; 
  private var scene:Scene3D;
  private var camera:HoverCamera3D;
  private var view:View3D;
  private var sphere:Sphere;
  private var lastMouseX:Number;
  private var lastMouseY:Number;
  private var lastPanAngle:Number; 
  private var lastTiltAngle:Number;
  private var move:Boolean;
  
  public function Main() 
  {
   stage.quality = StageQuality.HIGH;
   stage.scaleMode = StageScaleMode.NO_SCALE;
   stage.align = StageAlign.TOP_LEFT;
   
   createView();
   createScene(); 
  }
  
  private function createView():void
  {
   scene = new Scene3D();
   
   camera = new HoverCamera3D();
   camera.zoom = 2;
   camera.focus = 200;
   camera.distance = 2;
   camera.panAngle = 140;
   camera.tiltAngle = 0;
   camera.minTiltAngle = -60;
   camera.maxTiltAngle = 60;
   camera.hover(true);
   
   view = new View3D();
   view.scene = scene;
   view.camera = camera;
   view.x = stage.stageWidth / 2;
   view.y = stage.stageHeight / 2;
   addChild(view);
    
   addEventListener(Event.ENTER_FRAME, ef);
   addEventListener(MouseEvent.MOUSE_DOWN, mDown);
  }
  
  
  private function createScene() : void 
  {
   var bfMat:BitmapFileMaterial = new BitmapFileMaterial(IMAGE_URL,{smooth:true});
   
   sphere = new Sphere();
   sphere.radius = 1000;
   sphere.segmentsW = 32;
   sphere.segmentsH = 32;
   sphere.material = bfMat;
   sphere.scaleX = -1;
   sphere.bothsides = true;
   scene.addChild(sphere);
  }
  
  private function mDown(e:MouseEvent):void
  {
   lastPanAngle = camera.panAngle;
   lastTiltAngle = camera.tiltAngle;
   lastMouseX = mouseX;
   lastMouseY = mouseY;
   move = true;
   addEventListener(MouseEvent.MOUSE_UP, mUp);
  }
  
   public function mUp(e:MouseEvent):void
   {
   removeEventListener(MouseEvent.MOUSE_UP, mUp);
   move = false;
  }
  
  private function ef(e:Event) : void 
  {
   var cameraSpeed:Number = -0.4;
   
    if (move)
    {
    camera.panAngle = ((cameraSpeed *  (mouseX - lastMouseX)) + lastPanAngle);
    camera.tiltAngle = ((cameraSpeed * (mouseY - lastMouseY)) + lastTiltAngle);
   }
   
   camera.hover();
   view.render(); 
  }
 }
}

The same process will also work with panoramic videos with the VideoMaterial class on the sphere material.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP