Three.js - 控制器

Three.js - 摄像机控制器

静态场景固然有趣，但交互式场景更具吸引力。摄像机控制器允许用户使用鼠标、触控板或触摸屏在场景中移动摄像机。这对于探索 3D 环境和检查模型至关重要。

与加载器 (loaders) 类似，摄像机控制器不属于 Three.js 核心库的一部分。您必须从 three/examples/jsm/controls/ 目录导入它们。虽然存在几种类型的控制器，但对于通用应用程序而言，其中一种使用率远远高于其他任何类型。

首选：OrbitControls

OrbitControls 允许摄像机围绕一个目标点进行轨道运动。它直观易用，为模型查看器、电子商务产品展示和简单的场景探索提供了出色的用户体验。

轨道 (Orbit)：点击并拖动以围绕目标旋转。
缩放 (Zoom)：使用鼠标滚轮进行放大和缩小。
平移 (Pan)：右键点击并拖动（或按住 Ctrl/Cmd 并点击拖动）以同时移动摄像机及其目标。

实现

集成 OrbitControls 非常简单。您需要导入它，使用您的摄像机和渲染器的 DOM 元素对其进行实例化，然后在动画循环中更新它。

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 假设您已经设置好了场景、摄像机和渲染器
const canvas = renderer.domElement;
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 1. 实例化控制器
const controls = new OrbitControls(camera, canvas);

// 2. (可选但推荐) 启用阻尼效果以实现平滑运动
controls.enableDamping = true;
controls.dampingFactor = 0.05;

// 3. 在动画循环中更新
function animate() {
    requestAnimationFrame(animate);

    // 如果启用了阻尼，这是必需的
    controls.update();

    renderer.render(scene, camera);
}

animate();

重要提示：如果您设置 controls.enableDamping = true，则必须在动画循环的每一帧中调用 controls.update()。这会随着时间应用平滑效果。

自定义 OrbitControls

OrbitControls 具有许多可配置的属性，以根据您的需求定制用户体验：

.target：一个 Vector3，表示摄像机围绕其轨道运行的点。默认情况下是 (0, 0, 0)。您可以更改此项以聚焦到特定对象：controls.target.set(object.position.x, object.position.y, object.position.z);
.minDistance / .maxDistance：限制用户可以缩放的最近或最远距离。
.minPolarAngle / .maxPolarAngle：限制垂直轨道角度。例如，controls.maxPolarAngle = Math.PI / 2; 将阻止用户从下方查看场景。
.enablePan / .enableZoom：布尔值，如果您不想使用平移或缩放功能，可以禁用它们。
.autoRotate / .autoRotateSpeed：设置 controls.autoRotate = true; 以实现轻柔、连续的旋转，非常适合产品展示。

其他控制器类型

虽然 OrbitControls 是最常见的，但其他控制器在特定场景中也很有用：

控制器	描述与使用场景
TrackballControls	类似于 `OrbitControls`，但没有固定的“向上”方向，允许自由翻滚。对于初学者来说可能感觉不那么直观，但提供了更大的旋转自由度。
FlyControls	模拟飞行。摄像机持续向前移动，用户通过鼠标操纵方向。适用于飞行模拟器或大规模世界探索。
PointerLockControls	实现第一人称射击 (FPS) 风格的控制。它锁定鼠标光标，允许用户通过移动鼠标和使用键盘按键（W、A、S、D）进行移动和环顾。非常适合沉浸式第一人称体验。

最佳实践

从 OrbitControls 开始：除非您有特殊需求，否则 OrbitControls 提供最佳的通用体验。
始终启用阻尼：enableDamping 带来的平滑启动和停止运动感觉更精致、更专业。
考虑约束：不要让用户迷失方向。设置合理的 min/max 距离和角度，以使摄像机始终聚焦于场景的重要部分。
在不同设备上测试：确保您的控制方案在基于鼠标和基于触摸的设备上都能良好运行。