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

飞行控制

九十栋塔楼散落在三百米见方的场地上,用键盘推着相机在其中穿行。 速度可调,鼠标拖拽改变朝向,左下角常驻一份键位说明。

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

update 必须传 delta

轨道控制在渲染循环里调用 update() 不带参数, 飞行控制则必须 update(delta):它是速度积分, 没有时间增量就无法换算这一帧该移动多远。

速度以「单位每秒」计,示例设成四十,一秒能穿过半个场地。 从俯视看塔楼间距很大,实际贴地飞行时会觉得很快, 这也是飞行控制往往要提供调速的原因。

按键动作备注
W / S前进 / 后退沿当前视线方向
A / D左右平移不改变朝向
R / F上升 / 下降世界坐标 Y 轴
方向键俯仰 / 翻滚rollSpeed 控制角速度

dragToLook 的取舍

打开 dragToLook 后必须按住鼠标才能转向,松开就停, 不会出现指针一直被锁在中间的情况。演示类页面适合这个模式, 长时间巡视的编辑器则更常用指针锁定。

键盘监听挂在 window 上。点击画布后再按键,事件仍由全局监听接收, 不需要画布持有焦点。但如果页面里有输入框,按键会被同时接收, 需要判断焦点元素再决定是否响应。