3D 坐标系的基础概念、变换操作

3D 坐标系的学习文档可以帮助你理解在三维空间中如何定位、操作和理解对象。以下是一个详细的学习文档，涵盖了 3D 坐标系的基础概念、变换操作，以及它们在 3D 渲染中的应用。

---

3D 坐标系学习

1. 3D 坐标系简介

1.1 什么是 3D 坐标系？

3D 坐标系是用来描述三维空间中点或对象位置的系统。通常，我们使用笛卡尔坐标系来表示三维空间，其中包括三个相互垂直的轴：

• X 轴：通常表示左右方向（水平）。
• Y 轴：通常表示上下方向（垂直）。
• Z 轴：通常表示前后方向（深度）。

在一个 3D 坐标系中，每个点的位置由一个三元组 (x, y, z) 来表示，分别表示该点在 X、Y 和 Z 轴上的位置。

1.2 世界坐标系 vs 局部坐标系

• 世界坐标系：是一个全局参考坐标系，通常是固定不变的，所有对象的位置和方向都是相对于这个坐标系定义的。
• 局部坐标系：是相对于某个对象自身的坐标系，用于描述对象的内部结构或在自身坐标系中的位置和旋转。

2. 3D 变换

在 3D 坐标系中，对象的移动、旋转和缩放是通过变换操作来实现的。变换操作主要包括平移（Translation）、旋转（Rotation）和缩放（Scale）。

2.1 平移 (Translation)

平移是将对象沿 X、Y、Z 轴移动一段距离。平移变换通过将对象的每个顶点坐标加上一个位移向量 (dx, dy, dz) 来实现。

• 平移矩阵：
  

2.2 旋转 (Rotation)

旋转是围绕 X、Y 或 Z 轴旋转对象。旋转变换可以通过旋转矩阵实现，不同轴的旋转矩阵如下：

• 绕 X 轴旋转：
  

• 绕 Y 轴旋转：
  

• 绕 Z 轴旋转：
  

2.3 缩放 (Scale)

缩放是改变对象的大小，可以分别沿 X、Y、Z 轴独立缩放。缩放矩阵如下：

• 缩放矩阵：
  

2.4 组合变换

多个变换可以通过矩阵乘法组合在一起。例如，如果你想首先缩放对象，然后旋转它，最后平移它，你可以将各个变换矩阵依次相乘，应用于对象的顶点。

• 组合矩阵：
  M = T x R x S

这里 M 是最终的变换矩阵，T 是平移矩阵，R 是旋转矩阵，S 是缩放矩阵。应用顺序非常重要，因为矩阵乘法是不交换的。

3. 3D 投影

为了在二维屏幕上显示三维对象，我们需要将 3D 场景投影到 2D 平面上。常见的投影方式有两种：正交投影和透视投影。

3.1 正交投影 (Orthographic Projection)

正交投影保持对象的尺寸比例不变，无论它们离摄像机多远。这种投影适用于技术绘图和某些游戏场景。

• 正交投影矩阵：
  

3.2 透视投影 (Perspective Projection)

透视投影模拟了人眼的视角，物体离得越远，看起来越小。这种投影使得 3D 场景看起来更加真实。

• 透视投影矩阵：
  

3.3 视图矩阵 (View Matrix)

视图矩阵用于将世界坐标系转换为摄像机坐标系。这种转换相当于将场景从摄像机的位置和方向进行调整，使得摄像机成为观察点。

• 视图矩阵通常是通过摄像机的位置（eye）、目标位置（center）和上向量（up）来定义的。

4. 实践应用

在 Three.js 中，理解 3D 坐标系和变换是至关重要的。以下是一些应用示例：

4.1 创建一个立方体

在 Three.js 中，我们可以通过定义几何体和应用变换来创建和操纵 3D 对象。以下是一个简单的例子，创建并旋转一个立方体：

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;

function animate() {
  requestAnimationFrame(animate);

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

  renderer.render(scene, camera);
}

animate();

4.2 使用变换矩阵

在高级应用中，你可以直接操作对象的变换矩阵来实现复杂的操作。例如，组合旋转和平移：

cube.applyMatrix4(new THREE.Matrix4().makeRotationX(Math.PI / 4));
cube.applyMatrix4(new THREE.Matrix4().makeTranslation(1, 0, 0));

这些操作允许你精确地控制对象在 3D 空间中的行为和位置。