Pointer Lock API 是浏览器原生支持的鼠标锁定机制，用于FPS网页游戏实现无边界视角控制；需用户主动触发锁定，监听 movementX/Y 获取相对位移，配合 yaw/pitch 角度更新与限制，并做好兼容性降级。
启用 Pointer Lock 并处理用户交互
用户必须主动触发（如点击按钮）才能启用指针锁定，这是浏览器的安全限制。不能自动调用，否则会被忽略。
典型流程如下：
- 页面中放置一个“进入游戏”按钮，绑定
click事件 - 在事件回调中调用
canvas.requestPointerLock()（推荐锁定画布元素） - 监听
document.onpointerlockchange，检查document.pointerLockElement是否为预期元素，确认锁定成功 - 同时监听
document.onpointerlockerror处理失败情况（如用户拒绝或弹窗被拦截）
监听鼠标移动并更新视角
锁定后，鼠标光标消失，所有 mousemove 事件仍会触发，且事件对象上新增了 movementX 和 movementY 属性——它们是本次事件相对于上一次的像素级位移，**与屏幕坐标无关，也不受边缘限制**。
关键要点：
- 只在
document.pointerLockElement !== null时才处理移动数据，避免未锁定时误操作 -
movementX正值表示向右拖动 → 视角应向右转（绕 Y 轴顺时针旋转） -
movementY正值表示向下拖动 → 视角应向下俯（绕 X 轴正向旋转） - 建议将位移乘以灵敏度系数（如
0.002），再累加到 yaw / pitch 角度变量中 - 对 pitch 做合理限制（如 -89° ~ 89°），防止镜头翻转；yaw 可无限制，支持连续多圈旋转
退出锁定与恢复控制
用户按 ESC 键或调用 document.exitPointerLock() 会退出锁定。需监听 document.onpointerlockchange 或 document.onkeyup（检测 ESC）来响应。
退出后应：
- 重置或暂存当前视角状态
- 显示鼠标光标（CSS：
cursor: default） - 可选：暂停游戏逻辑或切换回 UI 模式
注意：退出锁定不会自动重置 movementX/Y，它们仅在锁定期间有效；退出后再移动鼠标，这些属性恒为 0。
兼容性与兜底策略
现代 Chrome、Firefox、Edge 全面支持，Safari 自 15.4 起支持，但需开启实验性功能（部分旧版 iOS Safari 不支持）。使用前务必检测：
if ('pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document) { ... }
不支持时可降级为“鼠标拖拽 + 键盘 WASD 控制”，或提示用户更换浏览器。避免让游戏因 API 缺失而完全不可玩。
