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):

/**
* ...
* @author Luke Mitchell
* @version 1
*/
 
package  {
  import org.papervision3d.materials.BitmapFileMaterial;
  import flash.events.MouseEvent;
  import org.papervision3d.materials.ColorMaterial;
  import org.papervision3d.materials.utils.MaterialsList;
  import org.papervision3d.objects.primitives.Cube;
 
  public class Main extends PaperBase {
 
    public var materials:MaterialsList = new MaterialsList(
    {
      front: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s1.gif"),
      back: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s3.gif"),
      left: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s4.gif"),
      right: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s2.gif"),
      top: new ColorMaterial(0x000000),
      bottom: new ColorMaterial(0x000000)
    });
    public var cubemap:Cube = new Cube(materials, 2000, 2000, 900, 5, 5, 5,Cube.ALL);
 
    public function Main() {
      init(600,300);
      cubemap.x = 0;
      cubemap.y = 0;
      cubemap.z = 0;
 
      default_scene.addChild(cubemap);
      default_camera.z = 0;
      default_camera.x = 0;
      default_camera.y = 0;
      default_camera.lookAt(cubemap);
 
      default_camera.zoom = 5;
      stage.addEventListener(MouseEvent.MOUSE_WHEEL, mWheel);
    }
 
    public function mWheel(e:MouseEvent):void {
      default_camera.zoom += e.delta / 5;
      if (default_camera.zoom < 5) {
        default_camera.zoom = 5;
      }else if (default_camera.zoom > 20) {
        default_camera.zoom = 20;
      }
    }
 
    override protected function processFrame():void {
      cubemap.yaw( -((stage.mouseX - (stage.width / 2)) / stage.width)*4);
      default_camera.rotationX = -((stage.mouseY - (stage.height / 2)) / stage.height) * (Math.sqrt(default_camera.zoom*6));
    }
  }
}

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

-Luke

This entry was posted in Examples and tagged , , , , , . Bookmark the permalink.

16 Responses to Panorama Viewer

  1. Zephyr says:

    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. Luke says:

    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. Aisn says:

    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. Shawn Yale says:

    Excellent demo project!

  5. JOsh vp says:

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

  6. Ryan says:

    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. Chris says:

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

  8. brian says:

    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?

  9. tim says:

    The reason to this that I found is this:

    the display object and the camera hold the same position, so the modulor between the two would be 0.

    change – camera.z = 2;

    then the error goes away…

  10. Ivan says:

    Hi Luke,

    this tutorial is great. I always wanted to create panorama viewer, but i was too lazy :-)

    I have Nokia 6120 and tons of photos like this http://redboss.wz.cz/fotky/17-panorama4.jpg
    Is there some easy way to put it into flash without “slicing” it in Photoshop into 4 JPGs or using Sprites – masks?

    Tnank you and keep doing good work!

  11. mark says:

    I wish I could get this to work. I’m taking your as class and trying to use it in the document class. Is this not correct?

  12. Pingback: PittMFUG » Blog Archive » July Meeting Redux

  13. harilal says:

    hi
    it’s an awsome tutorial.. I just tried myself but i can’t find the PaperBase Class .
    Where do i can download it?

  14. Hi. I’ve working on Panoramas for 10 years. Is there any update for this code in order to work on CS4 / CS5. I’m getting syntax errors. I just copied the above code…

    Waht about PaperBase class?

    Can you attach a working files package to download and test?

    Tnx

  15. Darcey says:

    Papervision cube based panoramic with full source code and assets download can be found at:

    http://www.allforthecode.co.uk/aftc/forum/user/modules/forum/article.php?index=5&subindex=6&aid=168

    But I tend to pref’ Away3D’s panoramic capabilities

    Away3D Sphere based panoramic and full source can be found at:
    http://www.allforthecode.co.uk/aftc/forum/user/modules/forum/article.php?index=5&subindex=6&aid=168

    Away3D SkyBox6 based panoramic and full source can be found at:
    http://www.allforthecode.co.uk/aftc/forum/user/modules/forum/article.php?index=4&subindex=7&aid=129

  16. MrCrumley says:

    The “&lt:” and “>” in your code examples need to be converted to “” to prevent throwing errors.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">