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:
// 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.