Camera and User Interaction - WebGL Game Development - page 182

this.canvas.onmouseup = function(ev) {
self.onMouseUp(ev);
}
this.canvas.onmousemove = function(ev) {
self.onMouseMove(ev);
}
}
MouseInteractor.prototype.onMouseUp = function(evnt){
this.dragging = false;
}
MouseInteractor.prototype.onMouseDown = function(evnt){
this.dragging = true;
this.x = evnt.clientX;
this.y = evnt.clientY;
this.button = evnt.button;
}
The setup function initializes event handlers for the onMouseUp , onMouseDown ,
and onMouseMove events. The onMouseDown event enables the dragging flag and
onMouseUp disables it. The onMouseDown event also stores the x and y coordinates
in the x and y class variables. These variables are used to calculate the delta, the
difference in the current, and previous mouse positions in the onMouseMove event.
MouseInteractor.prototype.onMouseMove = function(event){
this.lastX = this.x;
this.lastY = this.y;
this.x = event.clientX;
this.y = event.clientY;
if (!this.dragging) return;
this.shift = event.shiftKey;
if (this.button == 0) {
if(this.shift){
var dx=this.mousePosX(this.x) -this.mousePosX(this.lastX)
var dy=this.mousePosY(this.y) -this.mousePosY(this.lastY)
this.rotate(dx,dy);
}
else{
var dy = this.y - this.lastY;
this.translate(dy);
}
}
}