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/
I talk about the latest in frontend, along with my experience in building various (Indie) side-projects