Tutorial: Away3D Typescript: Mouse Events

In this overview tutorial we will be exploring how to implement mouse events on our 3D objects using the Away3D TypeScript library.

In our demo above, the user can interact with the 3D object using a computer mouse. This small demo, demonstrates the following events.

  • Mouse Over.
  • Mouse Out.
  • Mouse Button Down.
  • Mouse Button Up.
  • Mouse Click.
  • Mouse Double Click.
  • Mouse Scroll Wheel.

Try the controls out for yourself. Take note that the mouse event listeners are set up per object in the scene. Meaning that each object can have different event listeners. To open demo in a new window, click here.

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

Setting up Mouse Events

First thing first, is create a method to attach mouse events to our objects

Secondly we then call the method in our constructor, like so:
There you have it, we are now ready to attach mouse events to our objects. Which is really quite easy. I’ll break it down per event.

Mouse Over Event

Inside the setupMouseListeners method, include the following line:

Then include the onMouseOverObject method below any other methods already written:

Mouse Out Event

Inside the setupMouseListeners method, include the following line:

Then include the onMouseOutObject method below any other methods already written:

Mouse Down Event

Inside the setupMouseListeners method, include the following line:

Then include the onMouseDownObject method below any other methods already written:

Mouse Up Event

Inside the setupMouseListeners method, include the following line:

Then include the onMouseUpObject method below any other methods already written:

Mouse Click Event

Inside the setupMouseListeners method, include the following line:

Then include the onMouseClickObject method below any other methods already written:

Mouse Double Click Event

Inside the setupMouseListeners method, include the following line:

Then include the onMouseDoubleClickObject method below any other methods already written:

Mouse Scroll Wheel Event

** As of this writing, there is a bug in the AwayJS code and the “delta” of the scroll wheel is not updated along with the event. To get around this we also include a listener and method to handle whenever the mouse wheel is scrolled anywhere on the page. We store the value which we then retrieve in the second method.

To set up, we need a private variable to store the generic mouse wheel’s delta. Before the constructor, include the following line:

We set it to 0 to prevent any undefined or null errors.
Inside the setupMouseListeners method, include the following lines:

Then include the onMouseMouseWheelObject and onMouseWheel methods below any other methods already written:

In Closing

Adding mouse events are relatively easy. Each object is assigned a listener. Each listener calls a method. Remember, several listeners can call the same method.
As the AwayJS library is still being developed, we hope to update this tutorial as advances are made.

If this tutorial helped you, 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 *

*