Tutorial: Away3D TypeScript: Hover Controller Part 2 – Contain the Mouse Events

In this short tutorial, we build upon Away3D TypeScript: Hover Controller Part 1. Our attempt here is to control the 3D mouse events to within the boundaries of the 3D scene. For instance, when the mouse is dragging the camera around and goes beyond the scene’s borders, stop dragging the camera. This is similar to the code we used in the Away3D TypeScript: Start on MouseOver tutorial.

**You can skip this tutorial, if the previous tutorial fits your needs and containing the mouse controls will actually impede your program.

What we will need to develop to achieve this effect.

  • An onmouseover event listener on the 3D scene.
  • A public method to handle the onmouseover event.
  • An onmouseout event listener on the 3D scene.
  • A public method to handle the onmouseout event.
  • An variable to store the mouseover state.
  • Test if mouse is over the canvas before running the onMouseDown code.
  • Test if mouse is over the canvas before running the onMouseMove code.

This tutorial builds off of the Away3D TypeScript: Hover Controller Part 1. You will also alter the onload function in our HTML template. You can get that at Away3D TypeScript: Template. All the new or changed code will be highlighted in the full code block below.

HoverControllerP2.ts

Line 26 declares a Boolean variable named _isMouseOverCanvas and sets its default state to false. We will switch this to true whenever the mouse is over our 3D scene.

Line 95 & 101 tests if the mouse is over the 3D scene. If so run the next few statements. No need to waste CPU if we don’t need to.

Lines 121-124 creates a public method onMouseOverCanvas() that will change the state of _isMouseOverCavas to true.

Lines 127-131 creates a public method onMouseOutCanvas() that will change the state of _isMouseOverCavas to false. Secondly, it will set _isMouseDown to false. This will prevent the onMouseMove() method from executing its code as well.

HoverControllerP2.html

Below is the script code from our HTML document.

Lines 54-56 creates an event listener that listens for whenever the mouse is over the 3D scene. If so, call the onMouseOverCanvas() method on our Away3D object.

Lines 58-60 creates an event listener that listens for whenever the mouse leaves the 3D scene. If so, call the onMouseOutCanvas() method on our Away3D object.

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 1 to keep the mouse events to only within the boundaries of the 3D scene. This is ideal for a larger display area. However if you are displaying the 3D scene inside a small-ish container, it may not be optimal to use the above code. It is good to know what we are doing above, for in Part 3 we will continue to build the HoverController adding a zoom feature to the scroll wheel. If you don’t wont the above code, you’ll be able to identify and remove the code to suite your needs. Lastly in Part 4 we will add keyboard controls.

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 *

*