Camera and User Interaction - WebGL Game Development - page 183

The mouse move action is defined in the onMouseMove event. It stores the class
variables' this.x and this.y values in this.lastX and this.lastY and then
retrieves the current x and y coordinates. The code then checks whether dragging
is enabled. If enabled, it checks to see if the Shift key is pressed. If Shift is pressed, it
invokes the rotate function, otherwise it invokes the translate function.
The delta rotation angle along the x and y axes is the difference of the angle
calculated at the two mouse locations (last and current).
In our code, translation is the function of difference of the mouse movement along
the y axis of the canvas; we can always improve the function to involve movement
along the x axis. The translate function is defined as follows:
MouseInteractor.prototype.translate = function(value) {
var translateSensitivity=30 * this.SENSITIVITY;
var c = this.camera;
var dv = translateSensitivity * value / this.canvas.height;
c.moveForward(dv);
}
The translate function multiplies the delta value by a translate sensitivity factor
and then calculates the final dv value by dividing it with the canvas height. We
used a generic function to calculate the camera translation from the mouse delta
movement. You can use any sensitivity values and evolve any function that suits
your game. The rotate function is defined as follows:
MouseInteractor.prototype.rotate = function(dx, dy) {
var camera = this.camera;
camera.yaw(this.SENSITIVITY*dx);
camera.pitch(this.SENSITIVITY*dy);
}
The rotate function simply invokes the Camera class's yaw and pitch functions to
rotate the camera along the x and y axes.