经纬志
首页 / three.js / 使用示例

第一人称漫游

一条两侧排满建筑的主街,点击画面锁定指针,用 WASD 贴地行走, 按住 Shift 加速,按 ESC 交还鼠标。视野中央有一个准星。

three.js 0.160.0 · 更新 2026-10-28
源码与运行效果
运行效果

控制器只管朝向

PointerLockControls 收到鼠标移动后只改相机的旋转, 不会自己往前走。位移要靠业务代码调用 moveForward 与 moveRight, 这两个方法会按当前朝向右矢量与前后矢量推进相机。

示例每帧把相机高度固定为 1.7,模拟站在地面的人眼高度。 不加这一行,向下看时镜头会一路沉到地下; 需要上下楼梯时,应改成根据地面数据取高度。

按键动作说明
W / S前进 / 后退沿视线水平投影
A / D左右横移与朝向垂直
Shift加速 2.2 倍按住生效
ESC释放指针恢复成普通页面

锁定是一个状态

controls.isLocked 为真时浏览器把鼠标移动直接送进页面, 游标消失;为假时又变回普通交互。示例用 lock 与 unlock 两个事件切换遮罩层,用户随时知道自己在哪种模式。

锁定必须由用户手势触发。浏览器要求指针锁定来自点击等真实操作, 页面加载时自动调用会失败。遮罩层上的那句「点击进入」不是装饰, 而是让锁定发生在合法的用户手势里。