Three.js 相机控制器Controls
在 3D 场景中，摄像机的控制尤为重要，因为它决定了用户如何观察和与场景互动。Three.js 提供了多种相机控制器，最常用的有 OrbitControls、TrackballControls、FlyControls 和 FirstPersonControls。OrbitControls 适合用于查看和检查 3D 模型，TrackballControls 提供了更自由的旋转方式，FlyControls 适合于飞行模拟和第一人称视角的应用， FirstPersonControls 则提供了沉浸式的第一人称视角。在实际项目中，可以根据具体需求选择合适的控制器，并调整相关参数以达到最佳效果。本文将介绍这些相机控制器的基本用法及其特点
1.OrbitControls轨道控制器
OrbitControls 是 Three.js 中最常用的相机控制器之一。它允许用户围绕目标物体进行旋转、缩放和平移，非常适合用于查看 3D 模型。
初始化 OrbitControls
要使用 OrbitControls，首先需要在文件中引入 OrbitControls.js，然后在 JavaScript 文件中进行初始化。
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
// 创建场景
const scene = new THREE.Scene();
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 初始化 OrbitControls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// 渲染循环
function animate() {requestAnimationFrame(animate);controls.update(); // 更新控制器renderer.render(scene, camera);
}
animate();
主要属性和方法
controls.target: 设置相机围绕旋转的目标。controls.enableDamping: 启用阻尼（惯性效果），使控制更加平滑。controls.dampingFactor: 阻尼系数，通常设置在 0.1 左右。controls.enableZoom: 启用/禁用缩放。controls.enablePan: 启用/禁用平移。
2.TrackballControls轨迹球控制器
TrackballControls 提供了更自由的相机控制，允许用户进行旋转、缩放和平移操作。它与 OrbitControls 的区别在于 TrackballControls 允许自由旋转，而不局限于固定的目标。
初始化 TrackballControls
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';// 创建相机、场景和渲染器（同上）
// 初始化 TrackballControls
const controls = new THREE.TrackballControls(camera, renderer.domElement);
// 渲染循环
function animate() {requestAnimationFrame(animate);controls.update();renderer.render(scene, camera);
}
animate();
主要属性和方法
controls.rotateSpeed: 旋转速度，默认值为 1.0。controls.zoomSpeed: 缩放速度，默认值为 1.2。controls.panSpeed: 平移速度，默认值为 0.3。controls.staticMoving: 静态移动，如果为 true 则没有惯性效果。controls.dynamicDampingFactor: 动态阻尼系数，用于控制惯性效果。
3.FlyControls飞行控制器
FlyControls 提供了类似飞行模拟的相机控制方式，用户可以通过键盘和鼠标来控制相机的移动和旋转，非常适合用于飞行模拟和第一人称视角的应用。
import { FlyControls } from 'three/addons/controls/FlyControls.js';// 创建相机、场景和渲染器（同上）
// 初始化 FlyControls
const controls = new THREE.FlyControls(camera, renderer.domElement);
controls.movementSpeed = 10; // 移动速度
controls.rollSpeed = Math.PI / 24; // 旋转速度
// 渲染循环
function animate() {requestAnimationFrame(animate);controls.update(1); // 更新控制器renderer.render(scene, camera);
}
animate();
主要属性和方法
controls.movementSpeed: 移动速度。controls.rollSpeed: 旋转速度。controls.dragToLook: 启用/禁用鼠标拖拽查看。controls.autoForward: 启用/禁用自动前进。
操作按键和效果表
| 操作按键 | 效果 |
|---|---|
| W | 向前移动 |
| S | 向后移动 |
| A | 向左平移 |
| D | 向右平移 |
| R | 向上移动 |
| F | 向下移动 |
| ↑ | 向上查看 |
| ↓ | 向下查看 |
| ← | 向左查看 |
| → | 向右查看 |
| 鼠标左键 | 按住并拖动进行查看 |
| 鼠标滚轮 | 缩放视角 |
4.FirstPersonControls第一视角控制器
FirstPersonControls 提供了类似于第一人称射击游戏的相机控制方式，用户可以通过键盘和鼠标来控制相机的移动和旋转，非常适合用于创建沉浸式的 3D 环境。
初始化 FirstPersonControls
import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls.js'
// 创建相机、场景和渲染器（同上）
// 初始化 FirstPersonControls
const controls = new THREE.FirstPersonControls(camera, renderer.domElement);
controls.movementSpeed = 10; // 移动速度
controls.lookSpeed = 0.1; // 查看速度
// 渲染循环
function animate() {requestAnimationFrame(animate);controls.update(1); // 更新控制器renderer.render(scene, camera);
}
animate();
主要属性和方法
controls.movementSpeed: 移动速度。controls.lookSpeed: 查看速度。controls.lookVertical: 启用/禁用垂直查看。controls.activeLook: 启用/禁用鼠标查看。
操作按键和效果表
| 操作按键 | 效果 |
|---|---|
| W | 向前移动 |
| S | 向后移动 |
| A | 向左平移 |
| D | 向右平移 |
| R | 向上移动 |
| F | 向下移动 |
| Q | 停止移动 |
| ↑ | 向上查看 |
| ↓ | 向下查看 |
| ← | 向左查看 |
| → | 向右查看 |
| 鼠标左键 | 按住并拖动进行查看 |
| 鼠标右键 | 启用/禁用鼠标查看模式 |
| 鼠标滚轮 | 调整查看速度 |
5.其他控制器
Three.js 提供了多种其他相机控制器，以满足不同的需求。
| 名称 | 描述 |
|---|---|
| 设备朝向控制器 (DeviceOrientationControls) | 该控制器可以使得摄像机依据设备的朝向来进行调整。它的实现基于 HTML 的设备朝向 API |
| 编辑控制器 (EditorControls) | 该控制器是为在线三维编辑器而创建的，并被用于 Three.js 的在线编辑器中 |
| Oculas 控制器 (OculusControls) | 该控制器可以允许使用 Oculus Rift 设备来环顾场景 |
| 正交轨迹球控制器 (OrthographicTrackball Controls) | 该控制器和轨迹球控制器类似，只不过是用于 THREE. Orthographic Camera |
| 鼠标锁定控制器 (PointerLockControls) | 该控制器使用场景中渲染的 DOM 元素来锁定鼠标。可以为 3D 游戏提供基本的功能 |
| 变换控制器 (TransformControls) | 这个是 Three.js 编辑器内部使用的控制器 |
| VR 控制器 (VRControls) | 该控制器使用 PositionSensorVRDevice API 来控制场景。 |