sanguk.dev
작성완료
Pointer Lock API

Pointer Lock API

Pointer Lock API는 마우스 커서를 숨기고 상대적인 이동 값을 제공하여 FPS 게임이나 3D 모델 뷰어에서 자연스러운 회전 인터랙션을 가능하게 한다. 사용 방법은 특정 DOM 요소에서 requestPointerLock()을 호출하고, mousemove 이벤트에서 movementX, movementY 값을 활용하는 것이다. 주의할 점은 사용자 클릭을 통해서만 잠금 요청이 가능하며, 사용자 경험을 위해 상태 안내가 중요하다.

JavaScriptWeb Front Developer

웹에서 1인칭 시점(FPS) 게임이나 3D 모델 뷰어처럼 마우스 커서를 화면에 고정하고 자유롭게 회전하는 인터랙션을 구현할 때 Pointer Lock API를 활용할 수 있다.

Pointer Lock API란?

Pointer Lock API는 마우스 커서를 화면에서 숨기고, 마우스 이동 값을 상대적인 값으로 제공하는 기능이다. 이를 통해 시점 회전, 360도 카메라 제어 등의 동작을 자연스럽게 만들 수 있다.

기본 사용 방법

  1. 특정 DOM 요소에서 requestPointerLock() 호출
  2. mousemove 이벤트에서 movementX, movementY 값을 사용해 카메라 회전 등 처리
  3. 사용자가 ESC를 누르거나 코드에서 해제하면 pointer lock 종료

예제 코드

javascript
const canvas = document.getElementById('screen');

canvas.addEventListener('click', () => {
  canvas.requestPointerLock();
});

document.addEventListener('pointerlockchange', () => {
  const locked = document.pointerLockElement === canvas;
  console.log(locked ? 'Pointer locked' : 'Pointer unlocked');
});

document.addEventListener('mousemove', (e) => {
  if (document.pointerLockElement === canvas) {
    const { movementX, movementY } = e;
    console.log('Move:', movementX, movementY);
// 카메라 회전, 3D 모델 제어 등에 활용
  }
});

언제 사용하면 좋을까?

  • FPS 게임 같은 웹 게임 개발
  • 3D 제품 시각화 뷰어에서 360도 회전 제어
  • 지도•가상 공간 등 몰입형 탐색 UI

주의할 점

  • 사용자 클릭을 통해서만 잠금 요청 가능
  • 사용자 경험을 위해 잠금/해제 상태를 명확하게 안내하는 것이 중요

마무리

Pointer Lock API는 기존 마우스 이벤트만으로는 구현하기 어려웠던 자연스러운 회전 기반 인터랙션을 가능하게 한다. WebGL, Three.js, 게임 엔진 등과 결합하면 더욱 효과적인 사용자 경험을 제공할 수 있다.