requestPointerLock()

requestPointerLock() 메서드는 웹 애플리케이션에서 마우스 포인터를 고정하거나 잠그는 데 사용됩니다. 이를 통해 사용자가 브라우저 경계를 넘어 마우스 포인터가 이동하지 않도록 하고, 마우스 이동 이벤트를 연속적으로 받을 수 있게 됩니다. 주로 3D 게임이나 인터랙티브 애플리케이션에서 사용됩니다.

 

• 3D 게임: 마우스를 자유롭게 움직여 시점을 변경하거나 캐릭터를 제어하는 데 유용합니다.
• 인터랙티브 애플리케이션: 정밀한 마우스 제어가 필요한 그래픽 편집기나 시뮬레이션 프로그램에서 사용됩니다.
• 커서 고정: 특정 작업 중에 마우스 커서를 화면의 특정 위치에 고정할 수 있습니다.

document.body.requestPointerLock();

document.addEventListener('pointerlockchange', () => {
  if (document.pointerLockElement === document.body) {
    console.log('Pointer is locked');
  } else {
    console.log('Pointer is unlocked');
  }
});

document.addEventListener('mousemove', (event) => {
  if (document.pointerLockElement === document.body) {
    console.log(`Mouse moved: ${event.movementX}, ${event.movementY}`);
  }
});

 

• requestPointerLock(): 마우스 포인터를 고정하거나 잠급니다.
• pointerlockchange 이벤트: 포인터 고정 상태가 변경될 때 발생합니다.
• mousemove 이벤트: 포인터가 고정된 상태에서 마우스를 움직일 때마다 발생합니다. 이 이벤트를 통해 마우스 이동 값을 얻어올 수 있습니다.

이 메서드는 사용자가 명시적으로 포인터 잠금을 해제하거나, 특정 조건(예: ESC 키 누르기)에 의해 자동으로 해제될 수 있습니다.