指针锁定 Pointer Lock API 用法

指针锁定 Pointer Lock API

通过它可以访问原始的鼠标运动（基于指针的相对位移 movementX / movementY），把鼠标事件的目标锁定到一个特定的元素，同时隐藏视图中的指针光标（可通过 ESC 显示），并且可以消除鼠标在一个方向上移动的边界限制。

这个 API 对于需要大量的鼠标输入来控制运动，旋转物体，以及更改项目的应用程序来说非常有用。对高度视觉化的应用程序尤其重要，例如那些使用第一人称视角的应用程序，以及 3D 视图和建模。

语法

requestPointerLock 方法

请求指针锁定，具体语法如下：

element.requestPointerLock();

exitPointerLock 方法

退出指针锁定，具体语法如下：

document.exitPointerLock();

pointerlockchange 事件

当指针锁定状态改变时（如调用 requestPointerLock、exitPointerLock，用户按下 ESC 键等），pointerlockchange 事件被分发到 document。 这是一个简单事件，不包含任何的额外数据

pointerlockerror 事件

当调用 requestPointerLock 或 exitPointerLock而引发错误时，pointerlockerror 事件被分发到 document。 这是一个简单事件，不包含任何的额外数据

movement 事件的扩展

Pointer lock API 对 MouseEvent 事件增加了 movement 属性：

partial interface MouseEvent {
    readonly attribute long movementX;
    readonly attribute long movementY;
};