HTML5+CSS on Canvas 3D WebGL (TM) Library

Transform Controller Class

The transform controller catches all mouse events and allows the user to rotate and move (part of) the 3D scene using drag operations with the mouse.

Click on the run button of the following example and then drag keeping the left mouse button pressed. This rotates the scene around the z and x axis. You can also drag using the right mouse button to move the scene along the x and y axis. Furthermore dragging with the left button while keeping the control button pressed rotates around the z and y axis while the right button while keeping the control button pressed moves along the x and z axis. Pressing the shift button makes the mouse work more slowly and more precisely.



A new transform controller can be created using transformController. It can be activated using useController.


A single left click terminates the transform controller. While the controller is active the cursor appears as a cross-hair cursor and all mouse events apply to the controller. After the controller is terminated, mouse events are processed as normal and the the animation stays working! The "animation" example aboves show a stationary images for 30 seconds regardless when the controller is terminated.

You can restart the transform controller anytime, as the first line of the following example shows. To stop the animation as well stop needs to be used (second line).



Usually one either runs the animation (almost) forever (using a high duration) and enables the controller when the scene should be dragged, or one terminates the animation together with the controller, see transformController.onTerm.

After termination the transform controller automatically activates the previously active controller.

Transformation Matrix

While running the transform controller manipulates the transform matrix TM. It rotates or moves all transitions that enable useTM.

On activation of the controller the transformation matrix is left unchanged until the user performs a drag operation. After termination the transformation matrix if left in its current state, and can be further processed or reset in transformController.onTerm.

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:transformController.onTerm
Previous Page: Controller.automaticMouseMoveOut - Automatically generate missing mouseMoveOut Events