Panorama Viewer


*FIXED!!*

Here's a really simple example, all it does is texture a sphere and rotate it depending on what the camera is doing:

Click Here (1.3Mb download so I didn't embed this one)

Source Code (Uses the Base Class):

Actionscript:
  1. /**
  2. * ...
  3. * @author Luke Mitchell
  4. * @version 1
  5. */
  6.  
  7. package  {
  8.     import org.papervision3d.materials.BitmapFileMaterial;
  9.     import flash.events.MouseEvent;
  10.     import org.papervision3d.materials.ColorMaterial;
  11.     import org.papervision3d.materials.utils.MaterialsList;
  12.     import org.papervision3d.objects.primitives.Cube;
  13.     
  14.     public class Main extends PaperBase {
  15.       
  16.        public var materials:MaterialsList = new MaterialsList(
  17.        {
  18.          front: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s1.gif"),
  19.          back: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s3.gif"),
  20.          left: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s4.gif"),
  21.          right: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s2.gif"),
  22.          top: new ColorMaterial(0x000000),
  23.          bottom: new ColorMaterial(0x000000)
  24.        });
  25.        public var cubemap:Cube = new Cube(materials, 2000, 2000, 900, 5, 5, 5,Cube.ALL);
  26.       
  27.        public function Main() {
  28.          init(600,300);
  29.          cubemap.x = 0;
  30.          cubemap.y = 0;
  31.          cubemap.z = 0;
  32.          
  33.          default_scene.addChild(cubemap);
  34.          default_camera.z = 0;
  35.          default_camera.x = 0;
  36.          default_camera.y = 0;
  37.          default_camera.lookAt(cubemap);
  38.          
  39.          default_camera.zoom = 5;
  40.          stage.addEventListener(MouseEvent.MOUSE_WHEEL, mWheel);
  41.        }
  42.       
  43.        public function mWheel(e:MouseEvent):void {
  44.          default_camera.zoom += e.delta / 5;
  45.          if (default_camera.zoom <5) {
  46.               default_camera.zoom = 5;
  47.          }else if (default_camera.zoom> 20) {
  48.               default_camera.zoom = 20;
  49.          }
  50.        }
  51.       
  52.        override protected function processFrame():void {
  53.          cubemap.yaw( -((stage.mouseX - (stage.width / 2)) / stage.width)*4);
  54.          default_camera.rotationX = -((stage.mouseY - (stage.height / 2)) / stage.height) * (Math.sqrt(default_camera.zoom*6));
  55.        }
  56.     }
  57. }

You can use this for pretty much any panoramic image, just change the image url and tweak it a bit :)

-Luke

8 Comments

  1. Comment by Zephyr on February 28, 2008 4:25 pm

    Hi Luke,

    I can't get it to work at all, but how in the world did you manage to work around the 2880 px bitmap size limit and get an 8000 pixel image to load into flash?

    I really like your site,

    Zephyr

  2. Comment by Luke on February 28, 2008 4:50 pm

    Hehe, that's probably why it isn't working then!

    It seems to work sometimes, but sometimes not.. You've probably just pointed out why it's being so dodgy to me so I'm going to see if I can fix it.

    Thanks!
    -Luke

  3. Comment by Aisn on March 2, 2008 1:20 pm

    Hi,

    nice job, i viewing it with a little smile in my face. I took this a few weeks ago with the COD4 360 Pictures for fun like this http://www.aisn.de/aisn/examples/PV3D_Test05.swf

    I like your tutorials very well!

    Thanks
    Phil

  4. Comment by Shawn Yale on March 21, 2008 5:39 pm

    Excellent demo project!

  5. Comment by JOsh vp on May 14, 2008 3:54 pm

    Can't seem to find the base class that is affiliated with this interaction..can someone send me that class.

  6. Comment by Ryan on May 31, 2008 2:36 am

    Dude, you're awesome! Like you said: "It seems to work sometimes, but sometimes not..." But finally it worked. I'm gonna try to compact it a little bit to see if it works better. Man, thanks for your tutorials.

  7. Comment by Chris on July 7, 2008 2:12 am

    I tried it, but each frameloop I get a lookAt error?

  8. Comment by brian on July 14, 2008 12:50 pm

    i also get the lookat error... it comes from displayobject3d.as here:

    public function lookAt( targetObject:DisplayObject3D, upAxis:Number3D=null ):void
    {

    position.reset( this.x, this.y, this.z );
    target.reset( targetObject.x, targetObject.y, targetObject.z );

    zAxis.copyFrom(target);
    zAxis.minusEq(position);
    zAxis.normalize();

    if( zAxis.modulo > 0.1 )
    {
    xAxis = Number3D.cross( zAxis, upAxis || UP, xAxis );
    xAxis.normalize();

    yAxis = Number3D.cross( zAxis, xAxis, yAxis );
    yAxis.normalize();

    var look :Matrix3D = this.transform;
    // scale fix for lookAt()
    look.n11 = xAxis.x * _scaleX;
    look.n21 = xAxis.y * _scaleX;
    look.n31 = xAxis.z * _scaleX;

    look.n12 = -yAxis.x * _scaleY;
    look.n22 = -yAxis.y * _scaleY;
    look.n32 = -yAxis.z * _scaleY;

    look.n13 = zAxis.x * _scaleZ;
    look.n23 = zAxis.y * _scaleZ;
    look.n33 = zAxis.z * _scaleZ;

    this._transformDirty = false;
    this._rotationDirty = true;

    }
    else
    {
    trace("lookAt error");

    }
    }

    i put in a 'trace(zAxis.modulo);' and it comes out as 0 any idears?

Comments RSS TrackBack Identifier URI

Leave a comment


Papervision 2 is proudly powered by WordPress and themed by Mukka-mu