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

地图式控制

一整套街区在俯视角度下摊开,左键拖动是平移而不是旋转, 滚轮缩放、右键改朝向。倾斜滑杆能把视角从正俯视压到七十度。

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

与 OrbitControls 的三处差别

第一,screenSpacePanning 设为 false,平移沿地面滑动而不是沿屏幕。 第二,maxPolarAngle 默认接近 90 度,挡住相机跑到地平线以下。 第三,鼠标键位相反:左键平移、右键旋转,与二维地图的习惯一致。

这三项合起来,用户的直觉从「转一个物体」变成「移动一张地图」。 示例保留了滑杆,可以现场感受俯仰角被限制之后,画面不会翻到地面以下。

参数取值作用
左键平移沿地面拖动
右键旋转改变方位与俯仰
滚轮缩放12 – 140 单位
俯仰上限0 – 70°由滑杆换算成极角

平移为什么不能沿屏幕

屏幕空间平移在斜视时会把相机往前推,看起来像在向地下钻。 地面平移把位移投影到水平面,配合固定的目标高度, 拖动时画面始终沿地图平面滑走,这是二维地图用户最熟悉的手感。

缩放范围要配合场景尺度。minDistance 太小会穿进建筑, 太大则看不清细节。示例按街区尺度设成 12 到 140, 换成城市级场景时这两个数要整体放大。