首页 / three.js / 使用示例
地图式控制
一整套街区在俯视角度下摊开,左键拖动是平移而不是旋转, 滚轮缩放、右键改朝向。倾斜滑杆能把视角从正俯视压到七十度。
源码与运行效果
与 OrbitControls 的三处差别
第一,screenSpacePanning 设为 false,平移沿地面滑动而不是沿屏幕。
第二,maxPolarAngle 默认接近 90 度,挡住相机跑到地平线以下。
第三,鼠标键位相反:左键平移、右键旋转,与二维地图的习惯一致。
这三项合起来,用户的直觉从「转一个物体」变成「移动一张地图」。 示例保留了滑杆,可以现场感受俯仰角被限制之后,画面不会翻到地面以下。
| 参数 | 取值 | 作用 |
|---|---|---|
| 左键 | 平移 | 沿地面拖动 |
| 右键 | 旋转 | 改变方位与俯仰 |
| 滚轮 | 缩放 | 12 – 140 单位 |
| 俯仰上限 | 0 – 70° | 由滑杆换算成极角 |
平移为什么不能沿屏幕
屏幕空间平移在斜视时会把相机往前推,看起来像在向地下钻。 地面平移把位移投影到水平面,配合固定的目标高度, 拖动时画面始终沿地图平面滑走,这是二维地图用户最熟悉的手感。
缩放范围要配合场景尺度。minDistance 太小会穿进建筑,
太大则看不清细节。示例按街区尺度设成 12 到 140,
换成城市级场景时这两个数要整体放大。