Three.js - 摄像机

Three.js - 摄像机

在 Three.js 中，摄像机 (Camera) 是您观察 3D 世界的眼睛。它决定了您看到什么以及从哪个角度看到。就像一位现实世界的导演选择摄像机拍摄场景一样，您将选择一个 Three.js 摄像机来渲染您的场景。让我们探索最常见的类型。

主要摄像机类型

Three.js 提供了几种摄像机类型，但其中两种在绝大多数项目中被使用。

摄像机类型	描述与使用场景
透视摄像机 (PerspectiveCamera)	这是最常见的摄像机，旨在模拟人眼看到的方式。远处物体显得更小。它由一个视锥体 (frustum) 定义，这是一个金字塔状的观察体积。 关键参数： - fov (Field of View，视场角)：场景垂直方向的可视范围，以度为单位。 - aspect (长宽比)：宽高比 (width / height)，对于防止图像失真至关重要。 - near (近剪裁面)：近剪裁平面。任何比这更近的物体都不会被渲染。 - far (远剪裁面)：远剪裁平面。任何比这更远的物体都不会被渲染。 最适合：大多数 3D 应用程序、游戏和写实场景。
正交摄像机 (OrthographicCamera)	此摄像机渲染场景时没有透视效果。所有物体无论离摄像机多远都以相同比例显示。它由一个盒子状的观察体积定义。 关键参数： - left, right, top, bottom：观察盒子的边界。 - near, far：剪裁平面，与 PerspectiveCamera 相同。 最适合：2D 游戏、等距视图（例如策略游戏）、建筑蓝图和 UI 元素。

让摄像机跟随物体

一个常见的需求是让摄像机跟踪一个移动的物体。最简单的方法是在动画循环中使用 camera.lookAt() 方法。这会强制摄像机在每一帧都指向一个特定的 Vector3 位置。

import * as THREE from 'three';

// 假设您已经设置了场景、摄像机和一个目标对象（例如一个球体）
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(1, 32, 32),
    new THREE.MeshStandardMaterial({ color: 0xff0000 })
);
scene.add(sphere);

// 设置摄像机初始位置
camera.position.set(0, 5, 10);

// 动画循环
function animate() {
    requestAnimationFrame(animate);

    // 示例：移动球体
    sphere.position.x = Math.sin(Date.now() * 0.001) * 5;

    // 让摄像机看向球体的当前位置
    camera.lookAt(sphere.position);

    renderer.render(scene, camera);
}

最佳实践与高级技术

• 平滑跟随：直接使用 lookAt() 可能会感觉生硬。为了实现更平滑、更具电影感的跟踪，您可以对摄像机的位置和目标进行插值。使用 camera.position.lerp(targetPosition, alpha) 来平滑移动摄像机本身。
• 用户控制：对于大多数应用程序，您会希望为用户提供控制权。OrbitControls 插件是一个重要的工具，它提供开箱即用的轨道、缩放和平移功能。您可以轻松地从 three/addons/controls/OrbitControls.js 导入它。
• 管理长宽比：每当视口大小改变时，务必更新摄像机的 aspect 属性并调用 camera.updateProjectionMatrix()，以避免出现倾斜或拉伸的视觉效果。这是创建响应式场景的关键部分。