The function requestPointerLock() is used to locks the pointer to its current position and then makes it invisible. All browser does not support this method. It requests that the pointer be locked to a DOM element target.
We can use movedX and movedY to get the difference the mouse was moved since the last call of draw.
It enables us to create a sceneries that are not dependent on the movement of mouse.
In the locked state the system mouse cursor must be hidden. Movement and button presses of the mouse must not cause the window to lose focus
Syntax:
requestPointerLock()
Example:
Javascript
// Set the function function setup() { // Set the frame rate frameRate(5); // Set the canvas size createCanvas(600, 400, WEBGL); // Set the request pointer lock function requestPointerLock(); } // Set the draw function function draw() { // Set the background colour background(175); // Set the camera let cX = random(-10, 10); let cY = random(-10, 10); let cZ = random(-10, 10); camera(cX, cY, cZ + (height / 2) / tan(PI / 6), cX, 0, 0, 0, 1, 0); ambientLight(255); rotateX(-movedX * 0.1); rotateY(movedY * 0.1); noStroke(); normalMaterial(); box(100, 100, 100); } |
Output:
In the above example, we can see that the pointer becoming invisible when we are making any changes in the code we have to click “Esc” button for again making pointer visible.
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
