在 Three.js 中，控制器（Controls）是实现用户与3D场景交互的核心组件。通过不同的控制器，开发者可以轻松实现场景的旋转、平移、缩放、自由飞行等多种交互效果。本文将详细介绍几种常用控制器，并提供代码示例与配置指南。
一、OrbitControls（轨道控制器）
适用场景：适用于大多数需要旋转、缩放、平移查看的场景（如模型展示、地图浏览）。
基本使用
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 启用阻尼效果（惯性滑动）
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// 限制缩放范围
controls.minDistance = 5;
controls.maxDistance = 50;
// 自动旋转
controls.autoRotate = true;
主要属性和方法
controls.rotateSpeed：旋转速度，默认值为 1.0。controls.zoomSpeed：缩放速度，默认值为 1.2。controls.panSpeed：平移速度，默认值为 0.3。controls.staticMoving：静态移动，如果为true，则没有惯性效果。controls.dynamicDampingFactor：动态阻尼系数，用于控制惯性效果。
注意事项
- 需在动画循环中调用
controls.update()，尤其是启用阻尼后。 - 窗口大小变化时需更新控制器：
controls.handleResize()。
二、FlyControls（飞行控制器）
适用场景：第一人称视角的自由飞行（如太空探索、3D游戏）。
基本使用
import { FlyControls } from 'three/examples/jsm/controls/FlyControls.js';
const controls = new FlyControls(camera, renderer.domElement);
// 配置移动和旋转速度
controls.movementSpeed = 10;
controls.rollSpeed = Math.PI / 6;
操作方式
- WASD: 前后左右移动。
- 鼠标移动: 调整视角。
- Q/E: 垂直升降。
- R/F: 俯仰（Pitch）旋转。
适用场景
- 需要复杂自由移动的场景，但需较高的学习成本。
三、TrackballControls（轨迹球控制器）
适用场景：需要突破固定旋转轴限制的自由视角（如医学图像浏览）。
特点
- 允许任意方向旋转，无固定“上下”方向。
- 支持拖拽、缩放、旋转组合操作。
基本使用
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
const controls = new TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 2.0;
controls.zoomSpeed = 1.2;
主要属性和方法
controls.autoForward：如果设为true，摄像机将自动向前移动。controls.dragToLook：如果设为true，用户只能通过拖拽来环视四周。controls.movementSpeed：移动速度。controls.rollSpeed：旋转速度。controls.update(delta)：更新控制器状态，需要在动画循环中调用。
注意
- 长时间使用可能导致摄像机方向混乱，需提供“复位”功能。
四、FirstPersonControls（第一人称控制器）
FirstPersonControls 提供了沉浸式的第一人称视角，用户可以通过键盘控制摄像机在场景中移动。
基本使用
import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls.js';
const controls = new FirstPersonControls(camera, renderer.domElement);
controls.movementSpeed = 100; // 设置移动速度
controls.lookSpeed = 0.005; // 设置旋转速度
主要属性和方法
controls.movementSpeed：移动速度。controls.lookSpeed：旋转速度。controls.lookVertical：是否允许垂直方向旋转。controls.constrainVertical：是否限制垂直方向的旋转范围。
五、TransformControls（变换控制器）
适用场景：3D编辑器中的物体平移、旋转、缩放操作。
基本使用
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
const controls = new TransformControls(camera, renderer.domElement);
scene.add(controls);
// 绑定到目标物体
controls.attach(mesh);
// 监听变换事件
controls.addEventListener('dragging-changed', (event) => {
orbitControls.enabled = !event.value; // 操作时禁用OrbitControls
});
模式切换
controls.setMode('translate'); // 'translate' | 'rotate' | 'scale'
六、其他控制器
- FirstPersonControls：类似FlyControls，但行为更接近传统FPS游戏。
- DragControls：实现物体拖拽选择功能。
- DeviceOrientationControls：利用手机陀螺仪控制视角。
总结与选择建议
| 控制器 | 交互特点 | 适用场景 |
|---|---|---|
| OrbitControls | 轨道旋转+缩放+平移 | 通用模型查看 |
| FlyControls | 自由飞行 | 太空探索、3D游戏 |
| TrackballControls | 无轴限制旋转 | 医学影像、自由视角 |
| PointerLockControls | 鼠标锁定+键盘控制 | FPS游戏 |
| TransformControls | 物体变换操作 | 3D编辑器 |
更多three.js、cesium.js开源案例，请移至gitee.com/giser2017/t…
