THREE.JS投影与视图

以下是一个关于 投影与视图 的学习文档，帮助你理解如何在 3D 场景中将三维对象投影到二维平面上，并如何通过视图矩阵设置摄像机视角。

---

投影与视图学习文档

1. 投影的概念

1.1 什么是投影？

投影是将三维场景中的对象转换为二维平面图像的过程。投影的目标是模拟人眼或摄像机如何观察世界，使得三维物体在二维屏幕上呈现出合理的视觉效果。

1.2 投影类型

在 3D 渲染中，常见的投影类型主要有两种：

• 正交投影（Orthographic Projection）：在这种投影中，物体的大小不随距离变化，适用于技术制图或某些特殊类型的游戏。
• 透视投影（Perspective Projection）：模拟人眼观察物体的方式，物体越远看起来越小。这种投影使得 3D 场景看起来更加真实。

2. 正交投影

2.1 正交投影的原理

在正交投影中，所有投影线都是平行的。这意味着，无论物体离摄像机的远近，其在二维平面上的大小都是不变的。正交投影通常用于 CAD 工程图或二维游戏开发中。

2.2 正交投影矩阵

正交投影矩阵的形式如下：

• l, r：表示视景体的左边界和右边界。
• b, t：表示视景体的下边界和上边界。
• n, f：表示视景体的近裁剪面和远裁剪面。

2.3 正交投影应用示例

在 Three.js 中，你可以通过 THREE.OrthographicCamera 来实现正交投影。以下是一个创建正交相机的示例代码：

const camera = new THREE.OrthographicCamera(
  window.innerWidth / -2, window.innerWidth / 2, 
  window.innerHeight / 2, window.innerHeight / -2, 
  0.1, 1000
);
camera.position.z = 5;

3. 透视投影

3.1 透视投影的原理

透视投影模拟了人眼或摄像机的视角。在这种投影中，物体越远离观察者，它在屏幕上的投影就越小。这种投影方式适用于大多数 3D 游戏和仿真应用。

3.2 透视投影矩阵

透视投影矩阵的形式如下：

• fov：表示视角（Field of View），通常用度数来表示。
• aspect：表示视口的宽高比。
• n, f：表示近裁剪面和远裁剪面。

3.3 透视投影应用示例

在 Three.js 中，你可以使用 THREE.PerspectiveCamera 来实现透视投影。以下是一个创建透视相机的示例代码：

const camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, 0.1, 1000
);
camera.position.z = 5;

4. 视图矩阵

4.1 视图矩阵的概念

视图矩阵用于将世界坐标系转换到摄像机坐标系。这相当于将整个场景根据摄像机的位置和方向进行变换，使得摄像机成为观察点。视图矩阵通常由摄像机的位置（eye）、目标位置（center）和上向量（up）确定。

4.2 视图矩阵的公式

视图矩阵可以通过以下方式计算：

其中：

• x、y、z 分别是摄像机的右方向、上方向和前方向向量。
• eye 是摄像机的位置。

4.3 视图矩阵应用示例

在 Three.js 中，视图矩阵是通过摄像机的位置和方向自动计算的。以下是一个简单的示例代码，通过调整摄像机的位置和旋转来控制视图：

camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);

5. 综合应用

5.1 正交与透视结合使用

在一些应用场景中，正交投影和透视投影可能会结合使用。例如，在建模软件中，用户可能会在正交视图下精确编辑模型，而在透视视图下查看最终效果。

5.2 动态视图调整

视图矩阵的动态调整是 3D 应用中的常见操作。例如，在一个 3D 游戏中，玩家可以通过键盘或鼠标来控制摄像机的视角，实现场景中的自由移动和观察。

5.3 示例代码

以下是一个使用 Three.js 创建简单透视投影和视图矩阵的综合示例：

import * as THREE from 'https://cdn.skypack.dev/three@0.155.0';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
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);

camera.position.z = 5;
camera.position.y = 2;
camera.lookAt(0, 0, 0);

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

6. 进一步学习

掌握投影和视图矩阵后，你可以进一步学习以下内容：

• 后期处理：通过后期处理技术进一步调整渲染效果，例如景深、色彩校正等。
• 高级摄像机控制：如轨道控制、飞行控制等，允许更复杂的用户交互。
• 自定义投影矩阵：在需要特殊效果时，手动编写和应用自定义投影矩阵。