在 Three.js 中，Camera 是创建 3D 场景时不可或缺的一部分，它决定了如何从特定角度查看 3D 世界。Camera 的配置和使用直接影响渲染效果，尤其在创建复杂的 3D 应用、动画和音频场景时，正确使用 Camera 是关键。

本文将详细介绍 Three.js 中 Camera 的使用，涵盖常见的 PerspectiveCamera、OrthographicCamera、ArrayCamera 等，结合相关的属性、方法以及实际使用场景。文章将通过丰富的示例代码帮助你掌握如何在项目中配置和使用各种类型的摄像机。

1. 什么是 Camera？

在 Three.js 中，Camera 是一种对象，定义了从何处以及如何查看场景中的 3D 对象。不同类型的摄像机适用于不同的应用场景：

• PerspectiveCamera：透视摄像机，适用于绝大多数 3D 应用，模拟了人眼的透视效果。
• OrthographicCamera：正交摄像机，适用于需要无透视变形的 2D 或 3D 场景，比如一些 CAD 应用。
• ArrayCamera：用于多视角渲染的摄像机。
• CubeCamera：生成六个摄像机视图，适用于环境映射。

接下来，我们将重点讲解不同摄像机的创建和使用。

2. 创建透视摄像机（PerspectiveCamera）

透视摄像机是 3D 场景中最常用的摄像机类型，它会根据距离对象的远近，自动调整对象的大小，从而模拟人眼的效果。

2.1 创建 PerspectiveCamera

创建一个透视摄像机通常需要传入几个参数：

• fov：视角的角度（垂直方向的视野）。
• aspect：摄像机视图的宽高比。
• near：摄像机能够看到的最近距离。
• far：摄像机能够看到的最远距离。

const camera = new THREE.PerspectiveCamera(
  75, // 视角（度数）
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近剪切面
  1000 // 远剪切面
);
camera.position.set(0, 0, 5); // 设置摄像机位置

在这个例子中，我们创建了一个视角为 75 度的透视摄像机，设置了它的宽高比与浏览器窗口保持一致，近剪切面为 0.1，远剪切面为 1000。

2.2 将摄像机用于渲染

在 Three.js 中，将摄像机添加到场景并渲染场景的流程非常简单。通常，我们使用 PerspectiveCamera 来查看 3D 对象，并使用渲染器进行渲染。

const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

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

  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 渲染场景
  renderer.render(scene, camera);
}

animate();

在上述代码中，我们创建了一个旋转的立方体，并通过 PerspectiveCamera 从特定角度进行观察。

2.3 调整摄像机的视角

PerspectiveCamera 允许我们通过改变 fov（视角）动态调整场景的显示效果：

camera.fov = 60; // 将视角调整为60度
camera.updateProjectionMatrix(); // 更新摄像机的投影矩阵

3. 正交摄像机（OrthographicCamera）

正交摄像机与透视摄像机不同，它不会模拟人眼的透视效果，也就是说，无论物体距离摄像机多远，它们的大小始终保持一致。这种摄像机通常用于 2D 场景、UI 渲染或者 CAD 应用。

3.1 创建 OrthographicCamera

创建正交摄像机需要指定摄像机的可视范围（left, right, top, bottom）以及最近和最远的可见距离：

const aspect = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(
  -aspect * 5, // left
  aspect * 5,  // right
  5,           // top
  -5,          // bottom
  1,           // near
  1000         // far
);
camera.position.set(0, 0, 10);

在这个例子中，我们创建了一个正交摄像机，覆盖了从 left=-aspect*5 到 right=aspect*5，从 top=5 到 bottom=-5 的范围。

3.2 使用正交摄像机渲染

正交摄像机的使用方式与透视摄像机类似。你可以将其添加到场景中并进行渲染：

// 渲染器和场景
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

// 正交摄像机
const aspect = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(-aspect * 5, aspect * 5, 5, -5, 1, 1000);
camera.position.set(0, 0, 10);
scene.add(camera);

// 一个简单的立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

3.3 调整正交摄像机的可视范围

你可以通过动态调整摄像机的 left、right、top 和 bottom 属性来改变场景的可视范围：

camera.left = -10;
camera.right = 10;
camera.top = 10;
camera.bottom = -10;
camera.updateProjectionMatrix(); // 更新摄像机的投影矩阵

4. ArrayCamera 的多视角渲染

ArrayCamera 允许在同一场景中从多个视角渲染场景，尤其适合用于多屏渲染或者 VR 应用。ArrayCamera 是由多个 PerspectiveCamera 组成的。

4.1 创建 ArrayCamera

const cameras = [];

for (let i = 0; i < 2; i++) {
  const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(i * 2 - 1, 0, 5); // 分别设置两个摄像机的位置
  cameras.push(camera);
}

const arrayCamera = new THREE.ArrayCamera(cameras);

在上面的示例中，我们创建了两个透视摄像机，并将它们作为子摄像机传递给 ArrayCamera，从而实现多视角渲染。

4.2 渲染多视角

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, arrayCamera); // 使用 arrayCamera 渲染场景
}

animate();

5. CubeCamera 的环境映射

CubeCamera 是一种专门用于环境映射的摄像机类型，它通过从六个不同方向（上下左右前后）渲染场景，生成立方体贴图，常用于反射、折射等效果。

5.1 创建 CubeCamera

const cubeCamera = new THREE.CubeCamera(1, 1000, 256);
scene.add(cubeCamera);

5.2 将立方体贴图应用于材质

const reflectiveMaterial = new THREE.MeshBasicMaterial({
  envMap: cubeCamera.renderTarget.texture
});

6. 总结

Camera 是 Three.js 中的核心部分，帮助我们从不同角度和视角查看 3D 场景。在本文中，我们详细介绍了 PerspectiveCamera、OrthographicCamera、`

ArrayCamera以及CubeCamera` 的创建与使用方法。