Pointer Locking API

Published on April 01, 2021

← Back to tips

Let’s talk about pointer locking

In simple words, it lets you trap the mouse pointer inside of a single element 🀯 #WebAPI

We can use the raw mouse position data in JS to manipulate something on the screen.

Super useful if you are building games and 3D views.

THREE.js uses it under the hood for their perspective views.

In order to start using it, we just have to invoke requestPointerLock method.

Once the pointer is locked, we can then start listening to mouse events.

A nice example of an application using Pointer Locking is https://mousewars.io

Once the user is into the game, mouse pointer is locked inside of the Canvas element and ESC key needs to be hit to exit it.

More reading? πŸ‘‰ https://w3.org/TR/pointerlock/

πŸŽ‰ Interested in Frontend or Indie-hacking?

I talk about the latest in frontend, along with my experience in building various (Indie) side-projects