摘要

文章主要介绍了 Three.js 里 Vector3 三维向量的属性、众多方法（如投影、反射等），并给出了大量示例代码来展示这些方法的使用场景。

一、Vector3 的基本信息

在 Three.js 中，三维向量涉及较多难点，所以区分成了两节书写。Vector3 具有三个属性和六十九个方法。

// 创建 Vector3 示例
const vectorA = new THREE.Vector3(3, 4, 0);
const vectorB = new THREE.Vector3(1, 1, 0);

二、部分方法及示例

（一）projectOnVector 方法

将一个向量投影到另一个向量上。

// 创建两个向量
const vectorA = new THREE.Vector3(3, 4, 0);
const vectorB = new THREE.Vector3(1, 1, 0);
// 将 vectorA 投影到 vectorB 上
vectorA.projectOnVector(vectorB);
console.log(vectorA);

（二）reflect 方法

计算当前向量相对于指定法线向量的反射向量，在光照、反射效果和物理模拟中有用。

// 创建向量
const incidentVector = new THREE.Vector3(3, -4, 0);
const normalVector = new THREE.Vector3(0, 1, 0);
// 计算反射向量
incidentVector.reflect(normalVector);
console.log(incidentVector);

（三）round 和 roundToZero 方法

• round 方法是将向量中的分量四舍五入取整为最接近的整数值。
• roundToZero 方法是向量中的分量朝向 0 取整数（负数向上取整，正数向下取整）。

（四）set 方法

设置该向量的 x、y 和 z 分量。

// 创建一个 Vector3 实例
const vector = new THREE.Vector3();
vector.set(1, 2, 3);

（五）setComponent 方法

根据索引设置向量的某个分量的值。

（六）setFromCylindrical 方法

从圆柱坐标中设置向量。

// 创建一个 Cylindrical 实例
const cylindrical = new THREE.Cylindrical(5, Math.PI / 4, 2);
// 创建一个 Vector3 实例
const vector = new THREE.Vector3();
// 使用 setFromCylindrical 方法设置向量
vector.setFromCylindrical(cylindrical);
console.log(vector);

（七）setFromCylindricalCoords 方法

根据给定的圆柱坐标参数（半径、极角和高度）设置三维向量的值。

// 创建一个 Vector3 实例
const vector = new THREE.Vector3();
// 使用 setFromCylindricalCoords 方法设置向量
vector.setFromCylindricalCoords(4, Math.PI / 3, 1);
console.log(vector);

（八）setFromEuler 方法

根据欧拉角设置向量。

// 创建一个 Euler 实例
const euler = new THREE.Euler(Math.PI / 4, Math.PI / 4, 0);
// 创建一个 Vector3 实例
const vector = new THREE.Vector3(1, 0, 0);
// 使用 setFromEuler 方法设置向量
vector.setFromEuler(euler);
console.log(vector);

（九）setFromMatrixColumn 方法

从一个 4x4 矩阵的指定列中设置向量的值，在 3D 图形编程中处理变换矩阵时有用。

// 创建一个 4x4 矩阵
const matrix = new THREE.Matrix4();
matrix.set(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    10, 20, 30, 1
);
// 创建一个 Vector3 实例
const vector = new THREE.Vector3();
// 从矩阵的第一列设置向量
vector.setFromMatrixColumn(matrix, 0);
console.log(vector);

（十）setFromMatrix3Column 方法

从传入的三阶矩阵指定的列中，设置该向量的 x 值、y 值和 z 值。

（十一）setFromMatrixPosition 方法

从 4x4 矩阵中提取平移部分并将其设置为向量的值，在处理 3D 变换（如物体的位置）时有用。

// 创建一个 4x4 矩阵
const matrix = new THREE.Matrix4();
matrix.set(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    10, 20, 30, 1
);
// 创建一个 Vector3 实例
const vector = new THREE.Vector3();
// 从矩阵中设置向量
vector.setFromMatrixPosition(matrix);
console.log(vector);

（十二）setFromMatrixScale 方法

从一个 4x4 矩阵中提取缩放部分并将其设置为向量的值，在处理 3D 变换（如物体的缩放）时有用。

// 创建一个 4x4 矩阵
const matrix = new THREE.Matrix4();
matrix.set(
    2, 0, 0, 0,
    0, 3, 0, 0,
    0, 0, 4, 0,
    10, 20, 30, 1
);
// 创建一个 Vector3 实例
const vector = new THREE.Vector3();
// 从矩阵中设置向量的缩放值
vector.setFromMatrixScale(matrix);
console.log(vector);

（十三）setFromSpherical 方法

将向量的值设置为球坐标系中指定的球坐标。

// 创建一个 Spherical 实例
const spherical = new THREE.Spherical(5, Math.PI / 4, Math.PI / 2);
// 创建一个 Vector3 实例
const vector = new THREE.Vector3();
// 从球坐标设置向量
vector.setFromSpherical(spherical);
console.log(vector);

（十四）setFromSphericalCoords 方法

从球坐标中的 radius、phi 和 theta 设置该向量。

（十五）setLength 方法

将该向量的方向设置为和原向量相同，但长度为指定值。

// 创建一个 Vector3 实例
const vector = new THREE.Vector3(1, 2, 3);
// 输出原始向量
console.log("原始向量:", vector);
// 使用 setLength 方法设置新的长度
vector.setLength(5);
// 输出修改后的向量
console.log("修改后的向量:", vector);

（十六）setScalar 方法

将该向量的 x、y 和 z 值同时设置为等于传入的 scalar。

// 创建一个 Vector3 实例
const vector = new THREE.Vector3(1, 2, 3);
// 输出原始向量
console.log("原始向量:", vector);
// 使用 setScalar 方法设置所有分量为相同的值
vector.setScalar(5);
// 输出修改后的向量
console.log("修改后的向量:", vector);

（十七）setX、setY、setZ 方法

分别将向量中的 x、y、z 值替换为指定值。

（十八）sub、subScalar、subVectors 方法

• sub 方法是从该向量减去向量 v。
• subScalar 方法是从该向量的 x、y 和 z 中减去标量 s。
• subVectors 方法是将该向量设置为 a - b。

（十九）toArray 方法

返回一个数组[x, y,z]，或者将 x、y 和 z 复制到所传入的 array 中。

（二十）transformDirection 方法

通过传入的矩阵（m 的左上角 3 x 3 子矩阵）变换向量的方向，并将结果进行 normalizes（归一化）。

（二十一）unproject 方法

将此向量(坐标)从相机的标准化设备坐标 (NDC) 空间投影到世界空间。

（二十二）random 方法

将该向量的每个分量(x、y、z)设置为介于 0 和 1 之间的伪随机数，不包括 1。