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

轨道控制

拖拽旋转、滚轮缩放、右键平移,全部围绕同一个目标点。 阻尼、自动旋转、距离与极角限制都可以在现场切换。

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

说明

目标点设在 (0, 1.2, 0),相机初始位置在 (9, 7, 11)。所有交互都围绕目标点做球面运动: 拖拽改变方位角与极角,滚轮改变距离,右键平移会连同目标点一起移动。

顶部实时显示方位角、极角与距离。这三个数就是相机的球面坐标, 做视角书签、动画过渡时,记录的正是它们。

配置取值效果
enableDampingtrue松手后有一点惯性,停止更自然
dampingFactor0.07数值越小越「滑」,每帧必须调用 update()
autoRotatetrue无操作时缓慢环绕
autoRotateSpeed0.9约每分钟转一圈
minDistance / maxDistance4 / 34限制推进与拉远,避免穿模或迷路
maxPolarAngle0.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,并在不需要交互时禁用控制器。