p5.js requestpointerlock()用法及代碼示例

函數 requestPointerLock() 用於將指針鎖定到其當前位置，然後使其不可見。所有瀏覽器不支持此方法。它請求將指針鎖定到 DOM 元素目標。

我們可以使用movedX 和movedY 來獲取自上次draw 調用以來鼠標移動的差異。

它使我們能夠創建不依賴於鼠標移動的風景。

在鎖定狀態下，係統鼠標光標必須隱藏。鼠標的移動和按鈕按下不得導致窗口失去焦點

用法:

requestPointerLock()

例：

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

輸出：

在上麵的例子中，我們可以看到當我們對代碼進行任何更改時，指針變得不可見，我們必須單擊 “Esc” 按鈕再次使指針可見。

相關用法

注：本文由純淨天空篩選整理自_sh_pallavi大神的英文原創作品 p5.js requestpointerlock() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。