HTML5 Pointer Lock API 可捕获鼠标相对位移实现3D视角控制，需用户点击触发、监听pointerlockchange/pointerlockerror、累加movementX/Y更新yaw/pitch并限制范围，ESC可退出，Safari需修正movementY符号，仅支持桌面端。

使用 HTML5 的 Pointer Lock API 可以让网页捕获鼠标输入并隐藏光标，从而实现类似第一人称 3D 游戏的自由视角控制（如上下左右转动镜头）。它不移动鼠标本身，而是监听鼠标的相对位移（movementX/movementY），非常适合构建 Three.js、Babylon.js 等引擎中的 3D 漫游体验。

启用 Pointer Lock 的基本流程

必须由用户主动触发（如点击按钮），不能自动调用，这是浏览器安全策略强制要求：

• 在页面中添加一个按钮（例如“进入漫游模式”）
• 为按钮绑定点击事件，在回调中调用 element.requestPointerLock()
• element 通常是 document.body 或一个全屏容器
• 监听 pointerlockchange 事件判断是否成功锁定；监听 pointerlockerror 处理失败情况

监听鼠标移动并更新视角

锁定后，鼠标不再触发常规 mousemove，但会持续触发带相对位移的事件：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 监听 document.addEventListener('mousemove', handler)
• 在 handler 中读取 event.movementX 和 event.movementY（单位是像素，无符号，只表示本次移动量）
• 累加这两个值，换算成水平旋转角（yaw）和垂直旋转角（pitch），注意限制 pitch 范围避免翻转（如 -85° ~ 85°）
• 将 yaw/pitch 应用到相机的 rotation 或 quaternion 上（Three.js 中常用 camera.rotation.y 和 camera.rotation.x）

退出锁定与状态管理

用户按 ESC 键或调用 document.exitPointerLock() 会退出锁定，需做好清理：

立即学习“前端免费学习笔记（深入）”；

• 监听 pointerlockchange：当 document.pointerLockElement === null 时说明已退出
• 此时应暂停视角更新逻辑，重置或保留当前朝向（取决于交互设计）
• 可监听 keydown 事件，检测 ESC 键并主动调用 exitPointerLock() 提供明确退出方式
• 建议在 UI 显示锁定状态提示（如“视角已锁定，ESC 退出”），提升可用性

兼容性与注意事项

Pointer Lock API 已被 Chrome、Firefox、Edge、Safari（16.4+）支持，但仍有细节差异：

• Safari 对 movementY 符号处理与其他浏览器相反，建议统一取负：const dy = 'movementY' in event ? -event.movementY : 0;
• 移动端不支持 Pointer Lock（无鼠标概念），该方案仅适用于桌面端
• 若页面含 iframe，需设置 allow="pointer-lock" 属性才可在其中启用
• 部分浏览器在页面切换或弹窗后可能自动退出锁定，建议监听 visibilitychange 做恢复或提醒