Game Development Reference
In-Depth Information
Hence, when we compute the view matrix, each time we invoke
drawScene
, the
computed view matrix is stored on the stack and is used for each model transformation
in the loop.
The last change is in
setMatrixUniforms
, where we use our projection matrix from
the camera object.
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false,
cam.projMatrix);
...
}
Adding keyboard and mouse interactions
Generally we move our characters using the mouse and keyboard, but in our case,
we will rotate or move the camera instead. Keyboard interactions are easier to build
compared to mouse interactions. In mouse interactions, we have to calculate the
angle of rotation based on the mouse movement on the 2D screen, while in the case
of the keyboard, we have to directly modify our camera position with each key press.
When a key is pressed, we move the camera by multiplying
pi
with a constant factor
(
this.cam.roll(-Math.PI * 0.025)
) for each step.
So, let's quickly look at the
KeyBoardInteractor.js
file present in the
primitive
directory:
function KeyBoardInteractor(camera, canvas){
this.cam = camera;
this.canvas = canvas;
this.setUp();
}
KeyBoardInteractor.prototype.setUp=function(){
var self=this;
this.canvas.onkeydown = function(event) {
self.handleKeys(event);
}
}
The constructor of the
KeyBoardInteractor
class takes the
canvas
and
camera
objects as parameters. It invokes the
setup
function, which attaches a key handler
to our canvas object, in our case
handleKeys
.
