Tutorial: Away3D TypeScript: Hover Controller Part 3 – Zooming

In this very short tutorial, we build upon Away3D TypeScript: Hover Controller Part 2. Our attempt here is to add a zoom feature, that the user can use the mouse’s scroll wheel to zoom in and out of the scene. (Only while the mouse is over the scene.) In case your scroll wheel moves this page up and down on the iFrame demo above, here is a quick link to the demo.

What we will need to develop to achieve this effect.

  • An onmousewheel event listener on the 3D scene.
  • A private method to handle the onmousewheel event.
  • Test if the mouse wheel is moved forward or backwards.
  • Incrementally increase or decrease the HoverController‘s distance to its target.

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

HoverControllerP3.ts

Line 88 sets up the mouse event listeners that will detect when the mouse scroll wheel is dialed. When the mouse wheel is dialed, we call the method onMouseWheel() and pass the event to the method.

Lines 120-136 sets up our onMouseWheel() method.

Line 122 tests if the mouse is over the Away3D canvas element. We don’t want to be able to control the zoom, unless the user is actually hovering the mouse over the scene.

Line 123 tests if the scroll wheel was rotated forward or backwards. If the value is positive, then the wheel is being rotated forward. We want the scene to zoom in when the wheel is dialed forward.

Line 125 after testing if the wheel is being pushed forward, we now test if the distance from the cube is greater than 200. Otherwise, the user could zoom right past our cube object. This is an optional check.

Line 126 if there is still room to zoom in and see our object, (at least 200 units) decrease the distance from the HoverController to the target object by 20 units.

Line 131 tests if the HoverController‘s distance from the target object is less than 2000. This is an optional check. I just didn’t want the user to be able to scroll away forever. You can choose any value you want. For this scene, 2000 is a reasonable amount.

Line 132 says, “If the controller is less than 2000, move it another 20 units away from our cube.”

That’s it! Our zoom feature is complete.

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.

We built upon Part 2 to add zooming features using the mouse’s scroll wheel while the mouse is positioned above our 3D scene. We are getting interactive now! Next up in Part 4, we will be adding keyboard controls to pan, tilt, and zoom our HoverController.

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 *

*