首页 / three.js / 使用示例
第一人称漫游
一条两侧排满建筑的主街,点击画面锁定指针,用 WASD 贴地行走, 按住 Shift 加速,按 ESC 交还鼠标。视野中央有一个准星。
源码与运行效果
控制器只管朝向
PointerLockControls 收到鼠标移动后只改相机的旋转,
不会自己往前走。位移要靠业务代码调用
moveForward 与 moveRight,
这两个方法会按当前朝向右矢量与前后矢量推进相机。
示例每帧把相机高度固定为 1.7,模拟站在地面的人眼高度。 不加这一行,向下看时镜头会一路沉到地下; 需要上下楼梯时,应改成根据地面数据取高度。
| 按键 | 动作 | 说明 |
|---|---|---|
| W / S | 前进 / 后退 | 沿视线水平投影 |
| A / D | 左右横移 | 与朝向垂直 |
| Shift | 加速 2.2 倍 | 按住生效 |
| ESC | 释放指针 | 恢复成普通页面 |
锁定是一个状态
controls.isLocked 为真时浏览器把鼠标移动直接送进页面,
游标消失;为假时又变回普通交互。示例用 lock 与
unlock 两个事件切换遮罩层,用户随时知道自己在哪种模式。
锁定必须由用户手势触发。浏览器要求指针锁定来自点击等真实操作, 页面加载时自动调用会失败。遮罩层上的那句「点击进入」不是装饰, 而是让锁定发生在合法的用户手势里。