Add Interactivity

Controlling Objects with the Mouse

Mouse interactivity is a must when it comes to web pages, so I had to include a little bit about that functionality in a basic tutorial.

By default, mouse interactivity isn’t enabled in any aspect of Papervision. This is because it takes up processor time which doesn’t need to be taken up.

There are several different types of interactivity and we will start with having the scene detect the mouse position and have that control the camera.

package {
  1.  import flash.events.Event;
  2.  import org.papervision3d.materials.ColorMaterial;
  3.  import org.papervision3d.materials.MovieAssetMaterial;
  4.  import org.papervision3d.objects.DisplayObject3D;
  5.  import org.papervision3d.objects.primitives.PaperPlane;
  6.  import org.papervision3d.objects.primitives.Sphere;
  7.  import org.papervision3d.view.BasicView;
  8.  
  9.  public class HelloInteractivity extends BasicView {
  10.  
  11.   // move the definitions out here so the whole class can get them
  12.   private var myFirstSphere:Sphere;
  13.   private var myFirstPlane:PaperPlane;
  14.   private var pivotContainer:DisplayObject3D;
  15.  
  16.   public function HelloInteractivity() {
  17.    // create a movie material for the sphere from the library
  18.    var sphereMaterial:MovieAssetMaterial = new MovieAssetMaterial("sphereMaterial");
  19.    // create a color material for the plane
  20.    var planeMaterial:ColorMaterial = new ColorMaterial(0×55FF11);
  21.    planeMaterial.doubleSided = true;
  22.    // create a sphere and a paper airplane, increase the triangles on the sphere
  23.    myFirstSphere = new Sphere(sphereMaterial, 100, 12, 12);
  24.    myFirstPlane = new PaperPlane(planeMaterial, 3);
  25.    // move the plane in 3d space
  26.    myFirstPlane.x = 150;
  27.    myFirstPlane.y = 150;
  28.    myFirstPlane.z = -50;
  29.    // set an initial rotation for the plane
  30.    myFirstPlane.rotationY = -135;
  31.    // add the sphere to the scene
  32.    scene.addChild(myFirstSphere);
  33.    // add a container to use for pivoting the plane rotation
  34.    pivotContainer = new DisplayObject3D();
  35.    // add the plane to the container
  36.    pivotContainer.addChild(myFirstPlane);
  37.    // add the container to the scene
  38.    scene.addChild(pivotContainer);
  39.    // this is an inherited method (onRenderTick) that starts an
  40.    // enterframe event to render the scene
  41.    startRendering();
  42.   }
  43.  
  44.   override protected function onRenderTick(event:Event = null):void {
  45.    // rotate the pivot container (will offset the plane rotation)
  46.    pivotContainer.rotationY += 1;
  47.    // rotate the sphere
  48.    myFirstSphere.rotationY -= 1;
  49.    // get the rotation values for the camera based on where the mouse is in the scene
  50.    var rotY: Number = (mouseY – (stage.stageHeight / 2)) / (stage.height / 2) * 400;
  51.    var rotX: Number = (mouseX – (stage.stageWidth / 2)) / (stage.width / 2) * -400;
  52.    // set the camera's position
  53.    camera.x -= (rotX + camera.x) / 10;
  54.    camera.y -= (rotY + camera.y) / 10;
  55.    // make sure that it is calling the renderer
  56.    super.onRenderTick();
  57.   }
  58.  }
  59. }

If you compare this script with the animation script you will notice that the constructor has not changed at all yet it is able to interact with the mouse now. What we added was in the enterframe (onRenderTick) function. All that it does is get the position of the mouse on the stage and move the camera based on that position. The equation looks more complicated than that, but that is basically what it does.

There are a ton of ways that you can use this in your applications, maybe adding a keyboard listener to let the user control the camera and have the mouse control the camera’s rotation. If you have ever seen a first person shooter, that is basically how it functions.

Making Objects Interactive

Another type of interactivity is when you want to actually interact with an object itself. Once again, this functionality is not enabled by default but can easily be enabled and used in Papervision.

package {
  1.  import flash.events.Event;
  2.  import org.papervision3d.events.InteractiveScene3DEvent;
  3.  import org.papervision3d.materials.ColorMaterial;
  4.  import org.papervision3d.materials.MovieAssetMaterial;
  5.  import org.papervision3d.objects.DisplayObject3D;
  6.  import org.papervision3d.objects.primitives.PaperPlane;
  7.  import org.papervision3d.objects.primitives.Sphere;
  8.  import org.papervision3d.view.BasicView;
  9.  
  10.  public class HelloClickability extends BasicView {
  11.  
  12.   // move the definitions out here so the whole class can get them
  13.   private var myFirstSphere:Sphere;
  14.   private var myFirstPlane:PaperPlane;
  15.   private var pivotContainer:DisplayObject3D;
  16.  
  17.   public function HelloClickability() {
  18.    // call the super to turn on interactivity
  19.    super(0, 0, true, true);
  20.    // create a movie material for the sphere from the library
  21.    var sphereMaterial:MovieAssetMaterial = new MovieAssetMaterial("sphereMaterial");
  22.    sphereMaterial.interactive = true;
  23.    sphereMaterial.smooth = true;
  24.    // create a color material for the plane
  25.    var planeMaterial:ColorMaterial = new ColorMaterial(0×55FF11);
  26.    planeMaterial.doubleSided = true;
  27.    planeMaterial.interactive = true;
  28.    // create a sphere and a paper airplane, increase the triangles on the sphere
  29.    myFirstSphere = new Sphere(sphereMaterial, 100, 12, 12);
  30.    myFirstPlane = new PaperPlane(planeMaterial, 3);
  31.    // add the event listener to the object using the InteractiveScene3DEvent
  32.    myFirstSphere.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onObjectClick);
  33.    myFirstPlane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onObjectClick);
  34.    // move the plane in 3d space
  35.    myFirstPlane.x = 150;
  36.    myFirstPlane.y = 150;
  37.    myFirstPlane.z = -50;
  38.    // set an initial rotation for the plane
  39.    myFirstPlane.rotationY = -135;
  40.    // add the sphere to the scene
  41.    scene.addChild(myFirstSphere);
  42.    // add a container to use for pivoting the plane rotation
  43.    pivotContainer = new DisplayObject3D();
  44.    // add the plane to the container
  45.    pivotContainer.addChild(myFirstPlane);
  46.    // add the container to the scene
  47.    scene.addChild(pivotContainer);
  48.    // this is an inherited method (onRenderTick) that starts an
  49.    // enterframe event to render the scene
  50.    startRendering();
  51.   }
  52.  
  53.   private function onObjectClick(ARG_evt:InteractiveScene3DEvent):void {
  54.    // here is your event listener to control the object you clicked.
  55.    trace(ARG_evt.currentTarget);
  56.   }
  57.  
  58.   override protected function onRenderTick(event:Event = null):void {
  59.    // rotate the pivot container (will offset the plane rotation)
  60.    pivotContainer.rotationY += 1;
  61.    // rotate the sphere
  62.    myFirstSphere.rotationY -= 1;
  63.    // get the rotation values for the camera based on where the mouse is in the scene
  64.    var rotY: Number = (mouseY – (stage.stageHeight / 2)) / (stage.height / 2) * 400;
  65.    var rotX: Number = (mouseX – (stage.stageWidth / 2)) / (stage.width / 2) * -400;
  66.    // set the camera's position
  67.    camera.x -= (rotX + camera.x) / 10;
  68.    camera.y -= (rotY + camera.y) / 10;
  69.    // make sure that it is calling the renderer
  70.    super.onRenderTick();
  71.   }
  72.  }
  73. }

What we added to this version is an event listener. There were a couple requirements in order to have the event listener actually do anything, but that is basically all that we did. To start, we called the super and enabled interactivity (that is the fourth parameter). Next, we made the sphereMaterial and planeMaterial interactive by setting the interactive property to true. Finally, we added the InteractiveScene3DEvent listener. This fires custom events that Papervision objects handle. The only result in what we did was a trace of the object that was clicked, I will let you use your imagination for enhancing this.

Page 1 Page 2 Page 3 Page 4 Page 5