Three.js 数学工具：构建精确3D世界的基石

---

前言

在创建复杂的3D图形和动画时，数学扮演着不可或缺的角色。Three.js 提供了一套强大且易于使用的数学工具库，这些工具帮助开发者处理从基本的几何变换到高级物理模拟的各种任务。本文将深入探讨 Three.js 中提供的数学工具，并通过具体的代码示例来说明如何利用它们为你的项目增添精度与灵活性。

---

一、向量（Vectors）

向量是表示位置、方向或速度等概念的基础数据结构。Three.js 支持多种类型的向量，包括 Vector2, Vector3 和 Vector4，分别用于二维、三维和四维空间中的计算。

创建和操作向量

// 创建一个三维向量
const vector = new THREE.Vector3(1, 0, 0);

// 执行基本运算
vector.add(new THREE.Vector3(0, 1, 0)); // 加法
vector.sub(new THREE.Vector3(0, 1, 0)); // 减法
vector.multiplyScalar(2);               // 标量乘法
vector.normalize();                     // 归一化

// 计算两个向量之间的角度
const angle = vector.angleTo(new THREE.Vector3(0, 1, 0));

// 计算点积和叉积
const dotProduct = vector.dot(new THREE.Vector3(0, 1, 0));
const crossProduct = vector.cross(new THREE.Vector3(0, 1, 0));

// 应用到对象的位置或旋转
object.position.copy(vector);
object.quaternion.setFromUnitVectors(object.up, vector);

二、矩阵（Matrices）

矩阵用于描述物体的空间变换，如平移、旋转和缩放。Three.js 提供了 Matrix4 类来进行这些操作，并支持矩阵之间的乘法以组合多个变换。

应用矩阵变换

// 创建一个四元数并应用旋转
const quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 4);
const matrix = new THREE.Matrix4();
matrix.makeRotationFromQuaternion(quaternion);

// 将矩阵应用于对象
object.applyMatrix4(matrix);

// 组合平移、旋转和缩放
const translateMatrix = new THREE.Matrix4().makeTranslation(1, 0, 0);
const rotationMatrix = new THREE.Matrix4().makeRotationX(Math.PI / 4)