Элемент: метод requestPointerLock()

Метод requestPointerLock() интерфейса Element позволяет асинхронно затребовать захват указателя на заданном элементе.

Для отслеживания успеха или неудачи запроса необходимо прослушивать события pointerlockchange и pointerlockerror на уровне Document.

options Необязательно

Объект опций, который может содержать следующие свойства:

unadjustedMovement Необязательно

Отключает корректировку ускорения мыши на уровне операционной системы и вместо этого получает исходные данные ввода мыши. Значение по умолчанию — false; установка значения в true отключит ускорение мыши.

Promise, который разрешается значением undefined.

Временная активация требуется при вызове requestPointerLock(). Пользователь должен взаимодействовать со страницей или элементом пользовательского интерфейса для работы этой функции. Кроме того, связанный документ целевого элемента должен быть в активном состоянии.

Если вызывать requestPointerLock() сразу после освобождения захвата указателя с помощью стандартного жеста разблокировки (вместо вызова exitPointerLock()), вызов завершится неудачей, даже если доступна временная активация.

Если вызывать requestPointerLock() с requestFullscreen(), то requestPointerLock() необходимо вызвать в первую очередь, потому что requestFullscreen() использует состояние временной активации.

Токен allow-pointer-lock песочницы необходимо добавить при вызове requestPointerLock() в элементе <iframe>. Кроме того, ни один другой элемент в других элементах <iframe> не может находиться в режиме захвата указателя.

Захват указателя часто используется в онлайн-играх, когда требуется сосредоточить движение мыши на управлении игрой, без отвлечения указателя мыши, выходящего за пределы игровой области или доходящего до края окна.

Для включения захвата указателя пользователю нужно каким-либо образом взаимодействовать с пользовательским интерфейсом, например, нажав кнопку или сам игровой холст.

canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock();
});

Операционные системы по умолчанию включают ускорение мыши, что полезно, когда иногда требуется медленное точное перемещение (например, при работе с графическим пакетом), но также необходимо быстро перемещаться на большие расстояния (например, при прокрутке или выборе нескольких файлов). Однако для некоторых игр от первого лица предпочтительнее использовать исходные данные ввода мыши для управления вращением камеры — при этом одинаковое расстояние перемещения, быстрое или медленное, приводит к одинаковому вращению. Это обеспечивает лучший игровой опыт и более высокую точность, согласно профессиональным игрокам.

Чтобы отключить ускорение мыши на уровне операционной системы и получить исходные данные ввода мыши, можно установить значение unadjustedMovement в true:

canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock({
    unadjustedMovement: true,
  });
});

Дополнительные примеры кода см. в:

• демонстрация захвата указателя (посмотреть исходный код)
• API захвата указателя
• Отключение ускорения мыши для повышения производительности в играх FPS

• Document.pointerLockElement
• Document.exitPointerLock()
• Захват указателя