Looking with the Mouse

First-person cameras are often aimed by the user's mouse movements. If the user moves the mouse left or right, the camera yaws. If the user moves the mouse up or down, the camera pitches. Applications with first-person cameras typically hide the mouse cursor because its absolute position isn't important. Only its relative motion matters.

Browsers provide the PointerLock API to control the mouse's behavior. When a script lock's the pointer, the mouse is not constrained to the canvas or even the screen, and the cursor is hidden. To protect users, the pointer cannot be locked until the user has interacted with the page in some way. This code locks the pointer after the user clicks anywhere in the browser window:

content_copywindow.addEventListener('pointerdown', () => {
  document.body.requestPointerLock();
});

window.addEventListener('pointerdown', () => {
  document.body.requestPointerLock();
});

After the pointer is locked, any movement of the mouse will generate a pointermove event. With an unlocked pointer, you'd query the mouse location by accessing the event object's clientX and clientY properties. With a locked pointer, you care only about the mouse's relative movement, so you access the movementX and movementY properties instead. This move listener uses the horizontal movement to yaw the camera and the vertical movement to pitch the camera:

content_copywindow.addEventListener('pointermove', event => {
  if (document.pointerLockElement) {
    camera.yaw(-event.movementX * rotationSpeed);
    camera.pitch(-event.movementY * rotationSpeed);
    render();
  }
});

window.addEventListener('pointermove', event => {
  if (document.pointerLockElement) {
    camera.yaw(-event.movementX * rotationSpeed);
    camera.pitch(-event.movementY * rotationSpeed);
    render();
  }
});

If the pointer is not locked, then the condition is false and the camera will not yaw or pitch as the mouse moves.

Try out the first-person camera in this renderer. Click on the canvas to lock the cursor. Then use the mouse to point the camera and the keys to strafe and advance.

The camera's pitch is clamped to 15 degrees up or down. Hit esc to regain your mouse cursor. This is the default behavior in desktop browsers; no additional event listener is needed to unlock the pointer.

Pitching up or down changes the camera's forward vector. Advancing the camera pushes it along this new forward vector. By pitching and advancing, you can fly into the sky or descend through the floor. If this is bad, you might want to consider separating the camera's pitch from the direction of movement or clamp the camera's position in some way.