Camera and User Interaction - WebGL Game Development - page 181

this.cam.setPosition([pos[0]+10, pos[1],
pos[2]]);//more + along the X axis
break;
case 83://s key
this.cam.setPosition([pos[0],pos[1]-10,
pos[2]]);//move - along the Y axis (down)
break;
case 40://down arrow
this.cam.setPosition([pos[0], pos[1],
pos[2]+10]);//move + on the Z axis
break;
case 87://w key
this.cam.setPosition([pos[0], pos[1]+10,
pos[2]]);//move + on the Y axis (up)
break;
case 38://up arrow
this.cam.setPosition([pos[0], pos[1],
pos[2]-10]);//move - on the Z axis
break;
}
}
}
Handling mouse events
The mouse interaction is a little tricky as we have to derive a formula to calculate
the angle rotation from the distance covered by the mouse when it is dragged. Open
primitive/MouseInteractor.js in your favorite text editor and take a look at the
following code:
MouseInteractor.prototype.mousePosX=function(x){
return 2 * (x / this.canvas.width) - 1;
}
MouseInteractor.prototype.mousePosY=function(y){
return 2 * (y / this.canvas.height) - 1;
}
Our formula is simple. Our current camera angle is a function of the mouse position
and the canvas size, as shown in the following code snippet:
MouseInteractor.prototype.setUp=function(){
var self=this;
this.canvas.onmousedown = function(ev) {
self.onMouseDown(ev);
}