从零开始学习three.js（2）：一文详解three.js中各类相机Camera

本文链接：https://blog.csdn.net/qq_26655893/article/details/147440339

在 Three.js 中，相机（Camera）是定义用户视角和场景渲染范围的核心组件。通过相机，我们可以控制用户在 3D 场景中看到的内容和方式。Three.js 提供了多种相机类型，每种相机都有其独特的用途和属性。本文将详细介绍这些相机类型、它们的作用以及相机的常见属性。

1. 相机类型

1.1 透视相机（PerspectiveCamera）

透视相机是最常用的相机类型，它模拟了人眼和真实相机的透视效果。在这种相机下，物体的大小会随着距离的增加而减小，符合现实世界的视觉规律。透视相机非常适合用于创建沉浸式的 3D 场景，例如 3D 游戏、建筑可视化等。

创建透视相机

const fov = 75; // 视野角度（Field of View）
const aspect = window.innerWidth / window.innerHeight; // 宽高比
const near = 0.1; // 近裁剪面距离
const far = 1000; // 远裁剪面距离
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

1.2 正交相机（OrthographicCamera）

正交相机使用正交投影，物体的大小不会随着距离的增加而变化。这种相机适合用于 2D 游戏、CAD 工具、UI 元素以及需要精确测量和比例控制的场景。

创建正交相机

const left = -window.innerWidth / 2;
const right = window.innerWidth / 2;
const top = window.innerHeight / 2;
const bottom = -window.innerHeight / 2;
const near = 0.1;
const far = 1000;
const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);

1.3 立方体相机（CubeCamera）

立方体相机用于捕捉场景的全景视图，它通过渲染场景的六个方向（立方体的六个面）来创建一个环境贴图。这种相机常用于实现反射效果或环境映射。

1.4 数组相机（ArrayCamera）

数组相机允许创建一个相机数组，从而在多个视角之间切换。这种相机适合用于多视角渲染或实现复杂的相机过渡效果。

2. 相机的作用

相机的主要作用是定义用户在 3D 场景中的视角和可见范围。通过调整相机的位置、方向和参数，我们可以控制场景的渲染效果。例如，透视相机用于创建具有深度感的场景，而正交相机则用于创建平面化的 2D 效果。

3. 相机的属性

Three.js 中的相机具有一些通用属性，这些属性决定了相机的视角和视野范围。

3.1 视角（FOV）

仅透视相机具有视角属性（FOV），表示相机的垂直视野范围，单位为度。较大的视角值会导致更大的视野，但可能会产生畸变。

3.2 宽高比（Aspect）

宽高比表示相机水平视野范围与垂直视野范围的比值。通常，宽高比应与渲染目标（如 Canvas 或 WebGLRenderTarget）的宽高比相同，以避免图像被拉伸或压缩。

3.3 近裁剪面（Near）和远裁剪面（Far）

近裁剪面和远裁剪面定义了相机的渲染范围。位于近裁剪面之前的物体和位于远裁剪面之后的物体都不会被渲染。

4. 相机的常用方法

4.1 设置相机位置

通过 camera.position.set(x, y, z) 方法可以设置相机在场景中的位置。

4.2 设置相机方向

使用 camera.lookAt(target) 方法可以设置相机的朝向，target 是一个三维向量，表示相机需要指向的目标点。

5. 示例代码

以下是一个简单的示例，展示如何创建和使用透视相机和正交相机：

// 创建一个场景
const scene = new THREE.Scene();

// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个透视相机
const perspectiveCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
perspectiveCamera.position.set(0, 0, 5);

// 创建一个正交相机
const orthographicCamera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 0.1, 1000);
orthographicCamera.position.set(0, 0, 5);

// 添加一个简单的立方体
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, perspectiveCamera); // 使用透视相机渲染
  // renderer.render(scene, orthographicCamera); // 使用正交相机渲染
}
animate();