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.
An error has occurred. Please try again later.
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.
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 198 “break“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
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!