p5.js requestpointerlock() Function
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
function setup() {
frameRate(5);
createCanvas(600, 400, WEBGL);
requestPointerLock();
}
function draw() {
background(175);
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.
Last Updated :
01 Apr, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...