无需登录 数据私有 本地保存

指针锁定 API 演示 - 3D 迷宫移动

API演示 游戏 API Pointer Lock 演示 迷宫
45
0
0
0
⏱ 00:00 👣 0 步 🔒 点击锁定指针
点击画面锁定指针

WASD 移动 · 鼠标旋转视角 · Shift 加速

找到金色目标 🏆

恭喜到达终点！

关于指针锁定 API

指针锁定 API（Pointer Lock API），也称为鼠标锁定 API，允许 Web 应用锁定鼠标指针到某个元素上，隐藏默认光标，并获取原始鼠标移动数据（movementX / movementY）。它广泛用于第一人称 3D 游戏、虚拟现实体验、360° 全景浏览、CAD 工具等场景。

方法/事件说明
element.requestPointerLock()请求锁定指针到指定元素
document.exitPointerLock()释放指针锁定
document.pointerLockElement返回当前锁定指针的元素（只读）
pointerlockchange 事件指针锁定状态变化时触发
pointerlockerror 事件指针锁定请求失败时触发
mousemove.movementX/Y锁定后鼠标每次移动的增量（像素）
核心优势
  • 无限鼠标移动范围
  • 原始增量数据，无加速度干扰
  • 浏览器原生支持，无需插件
  • 完美的 FPS 游戏视角控制
  • 与 WebGL/Three.js 无缝集成

常见问题与知识点

指针锁定 API 允许网页"捕获"鼠标指针，隐藏系统光标，并持续获取鼠标的增量移动数据（movementX/movementY）。与普通 mousemove 不同，锁定后鼠标不受屏幕边缘限制，可以无限旋转——这是实现 FPS 游戏视角、3D 模型旋转、全景浏览的基础。普通鼠标事件在光标到达屏幕边缘时会停止报告移动。
主流桌面浏览器（Chrome 37+、Firefox 50+、Edge 13+、Safari 10.1+）均支持指针锁定 API。移动端支持有限：iOS Safari 不完全支持指针锁定（可能静默失败），Android Chrome 部分支持。本演示在移动端自动切换到触摸方向键 + 滑动旋转的替代方案，确保跨设备可用。
这是浏览器的安全策略。指针锁定必须由用户手势（如点击、按键）触发，不能通过脚本自动发起。这防止了恶意网站悄悄锁定用户鼠标。本演示中，您需要点击 3D 画布区域来激活指针锁定，按 ESC 或点击退出按钮可随时释放。
核心流程：① 在 canvas 上监听 click 事件调用 canvas.requestPointerLock()；② 监听 document.pointerlockchange 判断锁定状态；③ 在 mousemove 中读取 e.movementX/Y 来更新相机旋转（yaw/pitch）；④ 使用 document.exitPointerLock() 或让用户按 ESC 释放。Three.js 官方提供了 PointerLockControls 封装类，可快速集成。
本工具使用深度优先搜索（DFS）递归回溯算法生成完美迷宫（任意两点间有且仅有一条路径）。网格大小为 12×12 单元格（实际墙壁网格 25×25），入口在左上角，出口（金色目标）在右下角。刷新页面即可获得全新随机迷宫。未来版本将加入"重新生成"按钮和难度选择。
pointerlockerror 在以下情况触发：① 用户通过 ESC 快速退出后又立即请求锁定（浏览器限制）；② iframe 中未设置 allow="pointer-lock" 权限；③ 移动端浏览器不支持。优雅降级方案：检测 document.pointerLockElement 和事件，若指针锁定不可用，自动显示触摸控制或提示用户使用替代交互方式（如本演示的移动端方向键）。
🔧 相关工具