Tutorial: Away3D TypeScript: Hover Controller Part 1

In this short tutorial, we will demonstrate how use the native Away3D HoverController. A camera that can pan and tilt around the center point (0, 0, 0), by holding the left mouse button down, and moving the mouse around.

What we will need to develop to achieve this effect.

  • A HoverController object.
  • An onmousedown event listener.
  • An onmouseup event listener.
  • An onmousemove event listener.
  • Variables to store:
    • The last Pan angle.
    • The last Tilt angle.
    • The last mouse X position.
    • The last mouse Y position.
    • Is the mouse button down.

This tutorial builds off of the Away3D TypeScript: Template. All the new or changed code will be highlighted in the full code block below.

HoverControllerP1.ts

Line 9 declares a private variable named _cameraController of type HoverController.

Lines 21-24 stores temporary numeric values for _lastPanAngle, _lastTiltAngle, _lastMouseX, and _lastMouseY. These values are what will control the movement of the HoverController.

Line 25 stores a Boolean value of either true or false, in regards to whether or not the left mouse button is down. We need to know this, to test if the button is down AND the mouse is moving. If so move our camera accordingly. We set the variable to false as its default state.

Line 36 calls a method that will setup our mouse event listeners.

Lines 49-51 are old camera control values, that we will not be using this go around. You can either comment them out or just delete those lines.

Line 52 initializes our HoverController labeled _cameraController. Let’s look at the arguments a little closer.

  • this._view.camera tells the controller what the target object that it will be controlling is. In this case, the main viewport’s camera.
  • null tells the controller what object to look at. We could put an object or a Vector3D point. However since we put null, the camera will look at the center of the scene, point (0,0,0,).
  • 45 tells the controller to start at 45 degrees to the right of its starting point.
  • 20 tells the controller to start at 20 degrees above its starting point.
  • 500 tells the controller that its radius from the center is 500 units.

Line 79 we will not be rotating the object in this tutorial, so you can comment or delete this line.

Lines 84-89 sets up the mouse event listeners. We will need to know when the mouse button is pressed down, when the mouse button is released up, and when the mouse is moving.

Lines 92-99 handles the mouse down events.

Lines 94-95 store the camera’s current rotation left and right (pan), and the camera’s current rotation up and down (tilt).

Lines 96-97 store the current mouse’s X and Y coordinates.

Line 98 sets _isMouseDown to true, because, well… it IS true.

Lines 102-105 handles the mouse up events.

Line 104 reverts the _isMouseDown state back to false since the mouse button is no longer down.

Lines 108-115 handles the mouse move events.

Line 111 test if the mouse button is down. If so, run the next two statements.

Line 112 rotates the camera left or right depending on if the mouse’s new X position is greater or less than the mouse’s previously stored X position. The difference of the two mouse X positions is multiplied by 0.3 (a visually pleasing amount.) The computed value is then added to the camera’s previous pan angle, so it will be a smooth continuous motion.

Line 113 rotates the camera up or down depending on if the mouse’s new Y position is greater or less than the mouse’s previously stored Y position. The difference of the two mouse Y positions is multiplied by 0.3 (a visually pleasing amount.) The computed value is then added to the camera’s previous tilt angle, so it will be a smooth continuous motion.

Compile and Test in HTML

Remember, this is just the TypeScript file. You still need to compile the TypeScript file into a JavaScript file for browsers to read. For a refresher on how to do that refer to Away3D TypeScript – Getting Started.
Lastly, to implement the complied JavaScript file into our HTML template document change the JavaScript file name from Template.js to what ever you named it. Refer to the tutorial Away3D TypeScript: in an HTML Document if you need assistance.

In Closing

The HoverController is a great way to showcase a 3D object or scene. For a more in-depth look at all its parameters, check out the HoverController‘s documentation.

You now have a working HoverController, however, you may have noticed it reacts over the whole page. In Part 2 of this tutorial, (building upon Part 1) we will be constraining the mouse actions to within our canvas’s container element. In Part 3 we will be building on Part 2 and add a mouse scroll wheel zoom feature. In Part 4 we will be adding keyboard control.

If you liked this tutorial, you can follow us on Facebook or Twitter to keep an eye out for more tutorials.

Posted in Away3D TypeScript, HTML, JavaScript Tagged with: , , , , , , , , ,

Leave a Reply

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

*