html5 pointer lock api 可隐藏光标并持续获取鼠标相对位移，适用于fps视角控制；需用户点击触发锁定、监听状态变化与移动事件、限制俯仰角、处理退出逻辑，并注意浏览器兼容性与dom元素有效性。
使用 HTML5 的 Pointer Lock API 可以让网页“捕获”鼠标指针，隐藏光标并持续接收相对移动量（dx/dy），非常适合实现第一人称视角（FPS）的 3D 场景控制。它不依赖鼠标是否移出窗口，也不受系统光标限制，是 Web 端原生、低延迟的视角旋转方案。
启用 Pointer Lock 的基本流程
必须由用户主动触发（如点击按钮），不能自动调用，这是浏览器安全策略强制要求：
- 页面中添加一个按钮（例如
<button id="lockBtn">进入第一人称</button>） - 监听点击事件，在回调中调用
canvas.requestPointerLock()（推荐锁定到 canvas 元素） - 监听
document.onpointerlockchange判断是否成功锁定；监听document.onpointerlockerror处理失败（如权限被拒、元素已移除等）
监听鼠标相对位移并更新视角
锁定后，鼠标移动不再触发 mousemove，而是通过 document.onmousemove 的 movementX 和 movementY 获取增量（单位像素，与 DPI 无关）：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 在
document.onmousemove中读取e.movementX和e.movementY - 将它们累加到 yaw（水平旋转）和 pitch（垂直旋转）角度上，注意做合理限幅（如 pitch 控制在 -89° ~ 89° 防止翻转）
- 用这些角度构建相机的旋转矩阵或直接设置 Three.js 的
camera.rotation.y/camera.rotation.x
退出锁定与状态管理
用户按 ESC 键会自动退出锁定，但你应主动监听并清理状态：
- 监听
document.onpointerlockchange：当document.pointerLockElement === null时说明已解锁 - 此时可恢复 UI、重置视角变量、暂停游戏逻辑等
- 建议提供显式“退出”按钮，调用
document.exitPointerLock()
兼容性与注意事项
Pointer Lock API 在现代桌面浏览器（Chrome/Firefox/Edge）中稳定支持，但移动端不支持（无鼠标概念）：
- 务必检测 API 是否存在：
'pointerLockElement' in document - 避免在未锁定状态下读取
movementX/Y（值为 0，但易造成逻辑混淆） - 锁定目标元素需在 DOM 中且可渲染（如不可见或 display:none 的 canvas 无法锁定）
- Three.js 用户可结合
PointerLockControls类，它已封装上述逻辑，只需传入 camera 和 domElement 即可
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
