I am currently creating a 3D first-person shooter game in the browser using WebGL. How would I implement mouselook/free look for such a game?
Look at THREE.js's implementation of FirstPersonControls class.
You might also need to lock the pointer in order to freely look around the player.
Try this: Pointer Lock. Unfortunately it's not implemented in Opera and IE but WebGL isn't implement in those browsers either.
If you have some sort of scenegraph, you could build a node-setup like the following:
Movement in the X-Axis rotates the YawNode and movement in the Y-Axis rotates the PitchNode. The CameraNode will be moved when the player moves.
It's quite simple, and just takes two things.
Sample event code
Here's some sample source code for doing the event handling. The system module (which handles all game <--> browser interaction) keeps track of two variables:
To track the camera with the mouse, you just need
Same camera movement code
Here's some sample code for handling the camera rotation. Given the number of pixels the mouse has moved in the X or Y direction, rotate the camera by that many degrees.
Later, when you actually go on to render your world, simply generate a model-view matrix from your camera. (Converting the camera's position, yaw, pitch, and roll into vectors you can pass to gluLookAt.) And you should be good to go.
Mouselook is now supported in Chrome and Firefox via the W3C Pointer Lock specification. Essentially:
(Firefox is limited to supporting pointer lock in fullscreen until this bug is completed.)
A good tutorial article is Pointer Lock and First Person Shooter Controls on HTML5Rocks.