轨道控制
拖拽旋转、滚轮缩放、右键平移,全部围绕同一个目标点。 阻尼、自动旋转、距离与极角限制都可以在现场切换。
说明
目标点设在 (0, 1.2, 0),相机初始位置在
(9, 7, 11)。所有交互都围绕目标点做球面运动:
拖拽改变方位角与极角,滚轮改变距离,右键平移会连同目标点一起移动。
顶部实时显示方位角、极角与距离。这三个数就是相机的球面坐标, 做视角书签、动画过渡时,记录的正是它们。
| 配置 | 取值 | 效果 |
|---|---|---|
enableDamping | true | 松手后有一点惯性,停止更自然 |
dampingFactor | 0.07 | 数值越小越「滑」,每帧必须调用 update() |
autoRotate | true | 无操作时缓慢环绕 |
autoRotateSpeed | 0.9 | 约每分钟转一圈 |
minDistance / maxDistance | 4 / 34 | 限制推进与拉远,避免穿模或迷路 |
maxPolarAngle | 0.49π | 略高于地平线,禁止钻到地面以下 |
阻尼必须配 update
开启阻尼后,松开鼠标并不会立刻停止,而是逐帧衰减。
这要求渲染循环里每帧调用 controls.update()。
忘记调用时,表现为「拖动没反应」或「松手后画面卡住」,
而缓动效果完全没有发生。
极角限制的意义
maxPolarAngle 从 +Y 轴算起,Math.PI / 2 正好是水平。
设为 0.49π 让相机始终略高于水平,不会看到地面网格的背面,
也不会因为钻到地下而出现全黑画面。
城市三维场景通常把下限设在 0.45π 到 0.5π 之间。第一人称漫游则不该用 OrbitControls,它的运动模型不适合贴地行走。
复位与视角记录
controls.reset() 把相机、目标点与缩放恢复到创建控制器时的状态,
所以相机初始位置必须在创建控制器之前设置好。
要做多个视角书签,记录 camera.position 与 controls.target
两组值即可,恢复时同时赋回并调用 controls.update()。
移动端要区分单指与双指。OrbitControls 单指旋转、双指缩放,
放在可滚动的页面里时,触摸手势容易与页面滚动冲突。
容器上设置 touch-action: none,并在不需要交互时禁用控制器。