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: 启用/禁用自动前进。

操作按键和效果表

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: 启用/禁用鼠标查看。

操作按键和效果表

5.其他控制器

Three.js 提供了多种其他相机控制器，以满足不同的需求。