Tutorial: Away3D TypeScript: Hover Controller Part 4 – Keyboard Control

In this slightly longer tutorial, we build upon Away3D TypeScript: Hover Controller Part 3. Our attempt here is to add keyboard control to pan left/right, tilt up/down, and zoom in/out. Click once on the demo above to activate it, then use the arrow keys and/or 2,4,6,7,8,9 on the NumberPad on the right side of your keyboard.

What we will need to develop to achieve this effect.

  • An onkeydown event listener to detect when a key is pressed down.
  • An onkeyup event listener to detect when a pressed key is released.
  • A private onKeyDown method to handle key press events.
  • A private onKeyUp method to handle key release events.
  • Boolean variables to store up/down/left/right/zoomIn/zoomOut keypress states.
  • A method to control the true/false states of key variables.
  • A test every frame see if a key is pressed down. If so, increment the corresponding pan/tilt/zoom

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

HoverControllerP4.ts

Lines 29-34 declares Boolean variables to store the true/false state of our keys being pressed.

Line 45 calls a method to create our two keyboard event listeners.

Lines 87-100 test if the crucial keys are pressed down, if so, increments or decrements the pan/tilt/zoom respectfully.

Line 87 if the UP key is pressed increment the tilt 1 degree.

Line 88 if the DOWN key is pressed decrement the tilt 1 degree.

Line 89 if the LEFT key is pressed decrement the pan 1 degree.

Line 90 if the RIGHT key is pressed increment the pan 1 degree.

Lines 91-95 if the NumPad 7 key is pressed and the HoverController‘s distance to the target object is greater than 200, decrease the distance by 10.

Lines 96-100 if the NumPad 9 key is pressed and the HoverController‘s distance to the target object is less than 2000, increase the distance by 10.

Lines 175-179 creates the private method setupKeyboardListeners(). This method creates an onkeydown listener that calls the onKeyDown() method passing the trigger event. This method also creates an onkeyup listener that calls the onKeyUp() method passing the trigger event.

Lines 182-185 creates the private method onKeyDown(). This method calls the method keyState(), passing the key code of the key that was pressed down, as well as the state true (indicating that the key is pressed).

Lines 188-191 creates the private method onKeyUp(). This method calls the method keyState(), passing the key code of the key that was released, as well as the state false (indicating that the key was released).

Lines 194-220 creates the private method keyState() that accepts the parameters keyUsed of type number and keyDown of type Boolean. When ever a key is pressed or released on the keyboard, this method is called. Once called, this method checks to see if the key pressed is any of the ones we are interested in. If it is, then change the true/false state of the our corresponding variable.

Line 194 creates a switch statement that utilizes the “Fall-Through” code syntax in JavaScript. In this switch statement, we are testing against the keyUsed argument. This argument was passed from the calling method, and is holding the keycode value of the key pressed.

Lines 195-196 test the numbers 38 and 104 against the value stored in keyUsed. 38 is the keycode value of the UP arrow on the keyboard. 104 is the keycode value of the UP arrow or number 8 on the NumberPad (typically on the right side of the keyboard). If the value of keyUsed matches either of the cases execute the next line.

Line 197 assigns the true/false value of isKeyDown to our class variable _keyUp.

Line 198break“s from the switch statement. Stopping any more cases from being tested, and code inside the switch statement from executing.

Lines 199-216 are similar to the last four lines. They test the case against the keyUsed variable to see if it matches any of the keycodes we are interested in. If so, it then stores the passed true/false state to its respective class variable.

We have made the HoverController fully interactive now!

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.

In this Part 4 we just added keyboard control for pan/tilt/zoom. Which we built upon from part Part 3 that added a mouse wheel zoom feature. Part 2 contained the mouse controls to within the boundaries of the scene. Part 1, set up the basics for a HoverController camera in Away3D.

I truly hope these four tutorials helped you learn a lot and gained control of the HoverController. Send us a link to your use of the HoverController in Away3D. We’d love to see it!

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 *

*