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 来控制场景。