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，但会持续触发带相对位移的事件：
- 监听
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做恢复或提醒
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
