首页 / three.js / 使用示例
飞行控制
九十栋塔楼散落在三百米见方的场地上,用键盘推着相机在其中穿行。 速度可调,鼠标拖拽改变朝向,左下角常驻一份键位说明。
源码与运行效果
update 必须传 delta
轨道控制在渲染循环里调用 update() 不带参数,
飞行控制则必须 update(delta):它是速度积分,
没有时间增量就无法换算这一帧该移动多远。
速度以「单位每秒」计,示例设成四十,一秒能穿过半个场地。 从俯视看塔楼间距很大,实际贴地飞行时会觉得很快, 这也是飞行控制往往要提供调速的原因。
| 按键 | 动作 | 备注 |
|---|---|---|
| W / S | 前进 / 后退 | 沿当前视线方向 |
| A / D | 左右平移 | 不改变朝向 |
| R / F | 上升 / 下降 | 世界坐标 Y 轴 |
| 方向键 | 俯仰 / 翻滚 | rollSpeed 控制角速度 |
dragToLook 的取舍
打开 dragToLook 后必须按住鼠标才能转向,松开就停,
不会出现指针一直被锁在中间的情况。演示类页面适合这个模式,
长时间巡视的编辑器则更常用指针锁定。
键盘监听挂在 window 上。点击画布后再按键,事件仍由全局监听接收, 不需要画布持有焦点。但如果页面里有输入框,按键会被同时接收, 需要判断焦点元素再决定是否响应。