O'Reilly logo

WebGL Game Development by Sumeet Arora

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required