Being able to move around a 3D chart is one of the more spectacular features of 3D graphing. It really shows off the advantages of using a 3D engine and it will allow your users to see the same data in many different ways.
We'll use the previous recipe and add mouse interaction to it. So start by making a copy of the previous recipe's code and either copy it to a different package, or give it a different name. Don't forget to change the document class.
We'll need to store a few bits of data to calculate the mouse movements and convert them to camera changes:
- We will start by adding a number of variables to the
Mainclass:private var _cameraController:HoverController; private var _moving:Boolean = false; private var _lastPanAngle:Number; private var _lastTiltAngle:Number; private var _lastMouseX:Number; private var _lastMouseY:Number;
- Now in the constructor method, remove the code that set up the camera and replace it with the following code snippet:
_cameraController = new HoverController(_view.camera, null, 180, 0, 500); _view.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); _view.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
- Now implement the event listeners:
private function onMouseDown(event:MouseEvent):void { _moving = true; _lastPanAngle = _cameraController.panAngle; _lastTiltAngle = _cameraController.tiltAngle; _lastMouseX = stage.mouseX; _lastMouseY = stage.mouseY; stage.addEventListener(Event.MOUSE_LEAVE, onStageMouseLeave); } private function onMouseUp(event:MouseEvent):void { _moving = false; stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave); } private function onStageMouseLeave(event:Event):void { _moving = false; stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave); }That's all there is to it. Run the program and if you click-and-drag the mouse you will be able to pan around the graph, as shown in the following screenshot:
We attach a HoverController object to the camera. This controller will restrict the camera movement, so that it only follows certain allowed paths.
Once a controller has been defined, it is best not to directly change the camera. Except for maybe setting up the initial position, you should let the controller do its work; otherwise you might end up with unpredictable results.
The HoverController object has many optional arguments. In this recipe, we only set the initial pan and tilt angle, and the distance. There are other arguments that allow you to limit the movement, for instance, when there's no reason to look at the underside of the graph.
Check the following documentation for full details:
http://away3d.com/livedocs/away3d/4.0/away3d/controllers/HoverController.html#HoverController%28%29
With the controller attached, we now need to have something that changes the status of the controller. You can use keyboard events, but in this recipe we chose to listen to mouse-drag gestures: move the camera as long as the mouse button is pressed.
We've seen a similar technique used in Chapter 5, Adding Interaction, when selecting and interacting with the graph. This recipe adds one more element: listening to the MOUSE_LEAVE event. This is a safeguard for when the user moves the mouse cursor outside the stage.
As with previous recipes, we've only scratched the surface. There are many ways to move around a 3D world although some won't be of much use for displaying graphs. For instance, in first-person shooters, players use the cursor keys to simulate walking through the world.
We've only shown HoverController, but Away3D has two more controllers.LookAtController is a more general version; it also fixes the camera so it looks at one point, but it has more degrees of freedom.
FirstPersonController was previously described and will probably be of little use for most graph programmers.
You can always implement your own controller, starting from the ControllerBase class. The code will revolve around implementing the update method. This method is responsible for enforcing whatever limits you want to put in place.
Although not directly related to moving around the scene, it is related to the camera and interesting enough to mention: cameras can have lenses. These allow you to control the field of view and the projection type.
The following article has a few examples and shows how to use lenses:http://www.flashmagazine.com/tutorials/detail/away3d_4_basics_-_the_cameras/
In this recipe, we've moved the camera around. But you could just as well move the scene around and leave the camera fixed.
Keep in mind that if you change the 3D world, it will change for all cameras looking at that scene, so this could have unintended side effects if you have multiple views.
So in general this is not advised, but there might be situations where it's just easier to manipulate the scene instead of the camera.
If you look at the code of the controllers in Away3D, you may have noticed that they are attached to an entity, not a camera. While a camera is an entity, entities are the highest level class that is part of the scene.
This means that a cube and a light are also entities, so you can also define controllers on them. This can be useful if you want to move around multiple objects along set paths.
This is typically used for games, so it will probably not be used as much in graph applications, but it's good to keep in mind when your 3D graphs become a little more complicated, or you want to add some advanced movements.