7. Basic Mouse Interaction


In this tutorial, I'll simply show you how to do some basic movement in the scene by using the mouse.

This is the result:

Ugly, but simple. It's so simple that I'm just going to post the source code.. If you've been following my last tutorials, and you read the comments around the three lines of code in "ProcessFrame" then you should understand it.

Actionscript:
  1. package {
  2.     
  3.     import PaperBase;
  4.     import org.papervision3d.objects.DisplayObject3D;
  5.     import org.papervision3d.objects.parsers.Collada;
  6.     
  7.     public class Main extends PaperBase {
  8.       
  9.        public var cow:DisplayObject3D;
  10.        public var distance:Number = 1000; //Distance the camera should be from the model
  11.       
  12.        public function Main() {
  13.          init();
  14.        }
  15.       
  16.        override protected function init3d():void {
  17.          cow = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
  18.          cow.moveDown(100);
  19.          cow.scale = 3;
  20.          default_scene.addChild(cow);
  21.        }
  22.        override protected function processFrame():void {
  23.          // The next line is a bit of a mouthful, but it's quite simple really.
  24.          // It just gets the Y position of your mouse, and sets the camera.y to a
  25.          // value between -800 and 800, depending on the Y position of your mouse
  26.          // (If mouseY = 0 then camera.y = 800. If mouseY = stage.height, camera.y = -800)
  27.          default_camera.y = -(((mouseY - (stage.height / 2)) / stage.height) * 1600);
  28.          
  29.          // We don't want the camera to move further away from the model, so we do this:
  30.          default_camera.moveForward(default_camera.distanceTo(cow) - distance);
  31.          
  32.          // We now want to rotate the object depending on
  33.          // the Xmouse position. This is really simple.
  34.          cow.rotationY = -((mouseX / stage.width) * 360) //Rotation
  35.          
  36.          // NOTE: This will only work if you only have one object in your scene.
  37.          // I'll write a more advanced movement tutorial soon :)
  38.        }
  39.     }
  40. }

If you enjoyed this post, feel free to Buy Me a Beer!

19 Comments

  1. Comment by Alek on January 28, 2008 10:27 am

    Luke I see a white screen, there is something that I'm missing?
    Thank you very much! I'm following your blog, it is so helpfull.

    Alek

  2. Comment by Mike on February 6, 2008 4:46 pm

    Hi,

    I changed it to fit for Flash CS3, as well:

    package {

    import base.PaperBase;
    import org.papervision3d.objects.DisplayObject3D;
    import org.papervision3d.objects.parsers.Collada;

    public class CowExample extends PaperBase {

    public var cow:DisplayObject3D;
    public var distance:Number = 1000; //Distance the camera should be from the model
    public var $currentRoot;

    public function Main($root) {
    this.$currentRoot = $root;
    init($root);
    }

    override protected function init3d():void {
    cow = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
    cow.moveDown(100);
    cow.scale = 3;
    cow.pitch(-30);
    default_scene.addChild(cow);
    }

    override protected function processFrame():void
    {

    // The next line is a bit of a mouthful, but it's quite simple really.
    // It just gets the Y position of your mouse, and sets the camera.y to a
    // value between -800 and 800, depending on the Y position of your mouse
    // (If mouseY = 0 then camera.y = 800. If mouseY = stage.height, camera.y = -800)
    default_camera.y = -(((this.$currentRoot.mouseY - (this.$currentRoot.height / 2)) / this.$currentRoot.height) * 1600);
    // We don't want the camera to move further away from the model, so we do this:
    default_camera.moveForward(default_camera.distanceTo(cow) - distance);
    // We now want to rotate the object depending on
    // the Xmouse position. This is really simple.
    cow.rotationY = -((this.$currentRoot.mouseX / this.$currentRoot.width) * 360) //Rotation
    // NOTE: This will only work if you only have one object in your scene.
    // I'll write a more advanced movement tutorial soon :)
    }

    }

    }

    Mike

  3. Comment by Manuel on February 8, 2008 4:49 pm

    I have a white screen, too. The same as in tutorial 6. Can you explain what I have to write in my code when I have downloaded the model and texure files?
    I`m an absolutely noob ;)
    Sorry for my English. I`m from Germany

    Manuel

  4. Comment by Asmodeus on February 15, 2008 2:02 pm

    Hi Luke,

    like Alek and Manuel i also have a whit screen :/ Why is that ? Did i miss some configurations steps ?

  5. Comment by minipower on February 28, 2008 8:07 am

    Hi to all! i am NOT a programmer or someone important, i am minipower but...in the first tryout i had white screen like others then.. i resolved copying the plain text code version and in flashdevelop it worked fine!!!

    Maybe some kind of error writing comments or other :)

  6. Comment by Robin on February 28, 2008 1:44 pm

    I have a white screen too, but only if the dimensions are less then 800x600...

  7. Comment by Ramiro Araujo on February 29, 2008 7:05 pm

    Im getting a blank screen too, but if I test again with Ctrl + enter (simulates download) it gets it right. Im sure its not a code problem. Will probably work ok online.

  8. Comment by Juan on March 4, 2008 3:24 pm

    Hi, I have found a solution for CS3

    package {
    import PaperBase;
    import org.papervision3d.objects.DisplayObject3D;
    import org.papervision3d.objects.parsers.Collada;

    public class Main extends PaperBase {
    public var cow:DisplayObject3D;
    public var distance:Number = 1000;

    public function Main() {
    init();
    }

    override protected function init3d():void {
    cow = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
    cow.moveDown(100);
    cow.scale = 3;
    cow.pitch(-30);
    default_scene.addChild(cow);
    }
    override protected function processFrame():void {
    default_camera.y = -(((this.mouseY - (this.stage.stageHeight / 2)) / this.stage.stageHeight) * 1600);
    default_camera.moveForward(default_camera.distanceTo(cow) - distance);
    cow.rotationY = -((this.mouseX/this.stage.stageWidth)*360) //Rotation
    }
    }
    }

    the stage width and height in Flash CS3 is get by this.stage.stageWidth and this.stage.stageHeight

  9. Comment by Matt m on March 11, 2008 3:21 pm

    That works in flex 3, also:

    change all stage.height to stage.stageHeight and stage.width to stage.stageWidth

  10. Comment by webmaster on March 15, 2008 9:21 pm

    Yes It does work in Flex 3...
    probably simple question: is the reason the cow is at the lower right of the screen always because of the coordinates in the orignal .dae file?

  11. Comment by kea on March 22, 2008 4:39 pm

    First, I would like to thank you for this great work ! Papervision and flashdevelop look like great tools, but they definitely lack good tutorials. I can't tell you how grateful I am...
    However, I feel realy stupid, as I am stuck with a problem I can't solve. It is probably simple, but I have to admit I am completely lost.
    Everything is working fine with the tutorials. I've adapted this one to my object (a simple cube, instead of the cow...) When I test it, it does work fine (yeah ! I'm in 3D ! Awesome !)
    Unfortunately, my ultimate goal is to put it on a website. Problem is : as soon as I move my swf file (on another folder or on my server), it doesn't work anymore.
    Even if I move also the .dae, the texture, the .as files and the obj folder. Even when I change all paths (relative or absolute, even in the XML file...what is this one for, anyway ?)
    I've been trying for a few hours now, but no luck. I think I'm gona cry !
    So in short : what files will I need to upload on my server ? And do you know how to solve what seems to be a path problem ?

    Thank you again for the good work, anyway. :-)

  12. Comment by Hokusai_spain on April 4, 2008 4:41 pm

    Kea, maybe your problem is the sandbox security model. A explains about sandbox: work.whoischarles.com/files/flash_player_9_security_model.pdf

  13. Comment by cih on June 8, 2008 11:50 pm

    Thank you for the great tutorials, we are expecting more : )

    a question: I have a project where the user can create a painting and then attach the painting to the 3D model as a texture. I can update the texture png while the swf is still running, but cannot update the texture on the model. Removing and adding "cow" child does not update the texture. How can I remove the "cow var" totally to be able to add later?

    Thanks a lot!

  14. Pingback by Demo 080526 ~ 3D 球體 « Markvann + ActionScript on June 28, 2008 1:13 pm

    [...] 不能轉球,那就移動 camera ;參考 Basic Mouse Interaction,搞定! « Demo 080523 ~ 3D 螺旋 Demo 080527 ~ iTune 封面 [...]

  15. Comment by jasonw on July 5, 2008 5:07 am

    My cow doesn't stay locked to the center of the screen when I move my mouse vertically. The cow moves up and down vertically. The rotation works fine, I just can't figure out why the cow won't stay centered when I move my mouse along the Y axis.

    Any ideas?

  16. Pingback by Peter Pawan’s Blog » 3D in Flash. First steps. on July 5, 2008 6:39 am

    [...] tutorials over at this site definitely helps. I extended a base class downloaded from that site to get all the boilerplate code [...]

  17. Comment by Jay on August 3, 2008 7:35 am

    @jasonw:

    Probably the codebase has changed.
    Using camera.lookAt( cow ) inside the processFrame() method fixes it for me.

  18. Pingback by Hebi Flash Blog » 9 navigations pour la 3D sur le web… et plus ? on August 4, 2008 12:57 am

    [...] en place technique est facile à réaliser et l’effet saisissant quoique limité. exemple : L’exemple de la vache ou plus complexe Screenvader, Tiltviewer… [...]

  19. Comment by Fraanske on September 3, 2008 5:11 pm

    Great tut, but I'd like to know some less basic techniques. With Great White out in the water, we get a whole set of new goodies such as shaders, but mouse interaction has become a bit more difficult. The only tut that gives me 100% what I need, is horribly complex (as in "too time consuming to deploy quickly"). I'd like to know a technique that was more like 1.7, when you could attach filters and EventHandlers to a 3DObject's internal container sprite. I'd like to know how to set EventHandlers on objects directly, instead of handling MouseEvents on the Stage. Still, I like your tut to display a single object: it's perfect for that purpose!

Comments RSS TrackBack Identifier URI

Leave a comment


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