Función p5.js requestpointerlock()

La función requestPointerLock() se usa para bloquear el puntero en su posición actual y luego lo hace invisible. Todos los navegadores no admiten este método. Solicita que el puntero se bloquee en un objetivo de elemento DOM.

Podemos usar moveX y moveY para obtener la diferencia que se movió el mouse desde la última llamada de sorteo.

Nos permite crear escenarios que no dependen del movimiento del ratón.

En el estado bloqueado, el cursor del mouse del sistema debe estar oculto. El movimiento y las pulsaciones de los botones del mouse no deben hacer que la ventana pierda el foco

Sintaxis:

requestPointerLock()

Ejemplo:

// 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);
}

Producción:

En el ejemplo anterior, podemos ver que el puntero se vuelve invisible cuando hacemos cambios en el código. Tenemos que hacer clic en el botón «Esc» para volver a hacer visible el puntero.