一、三維世界的數學基石

在Three.js的三維世界里，所有視覺效果的實現都建立在嚴密的數學基礎之上。其中向量（Vector） 和矩陣（Matrix） 是最核心的數學工具，它們就像構建數字宇宙的原子與分子，支撐著物體的移動、旋轉、縮放以及復雜的空間變換。本文一文詳解向量（Vector） 和矩陣（Matrix）。

1.1 向量：三維空間的基本元素

向量是描述空間方向和位置的數學實體，在Three.js中主要使用以下三種向量類型：

// 三維向量（最常用）
const position = new THREE.Vector3(1, 2, 3);// 二維向量（用于UV映射）
const uvCoord = new THREE.Vector2(0.5, 0.5);// 四維向量（顏色RGBA或特殊計算）
const color = new THREE.Vector4(1, 0, 0, 0.5);

核心操作示例：

// 向量加法（物體位移）
const v1 = new THREE.Vector3(1, 2, 3);
const v2 = new THREE.Vector3(4, 5, 6);
v1.add(v2); // (5,7,9)// 點積計算（光照計算）
const lightDir = new THREE.Vector3(0, 1, 0).normalize();
const normal = new THREE.Vector3(0, 0, 1);
const dotProduct = lightDir.dot(normal); // 0// 叉乘應用（計算法線）
const tangent = new THREE.Vector3(1, 0, 0);
const bitangent = new THREE.Vector3(0, 1, 0);
const normal = tangent.cross(bitangent); // (0,0,1)

1.2 矩陣：空間變換

Three.js中的矩陣主要用于描述空間變換關系，以下是關鍵矩陣類型：

矩陣類型	維度	應用場景
Matrix3	3x3	UV變換、法線矩陣
Matrix4	4x4	模型視圖投影矩陣（核心）
Matrix4數組	-	實例化渲染

二、矩陣運算的奧秘

2.1 基礎矩陣操作

// 創建單位矩陣（所有矩陣變換的起點）
const identityMat = new THREE.Matrix4().identity();// 矩陣相乘（變換組合）
const rotateMat = new THREE.Matrix4().makeRotationX(Math.PI/2);
const translateMat = new THREE.Matrix4().makeTranslation(0, 5, 0);
const finalMat = translateMat.multiply(rotateMat); // 注意順序！// 矩陣求逆（坐標系轉換）
const viewMatrix = camera.matrixWorldInverse;

2.2 矩陣分解技巧

const matrix = new THREE.Matrix4();
const position = new THREE.Vector3();
const quaternion = new THREE.Quaternion();
const scale = new THREE.Vector3();matrix.decompose(position, quaternion, scale);
console.log('Position:', position);
console.log('Rotation:', quaternion);
console.log('Scale:', scale);

三、矩陣變換實戰指南

3.1 變換組合原理

Three.js采用后乘的矩陣組合方式，理解執行順序至關重要：

const mesh = new THREE.Mesh(geometry, material);// 正確的變換順序：縮放 -> 旋轉 -> 平移
mesh.scale.set(2, 2, 2);
mesh.rotation.x = Math.PI/4;
mesh.position.y = 10;// 等效矩陣計算：
const scaleMat = new THREE.Matrix4().makeScale(2, 2, 2);
const rotateMat = new THREE.Matrix4().makeRotationX(Math.PI/4);
const translateMat = new THREE.Matrix4().makeTranslation(0, 10, 0);// 矩陣組合順序：T * R * S
const finalMatrix = translateMat.multiply(rotateMat).multiply(scaleMat);
mesh.matrix = finalMatrix;

3.2 矩陣堆棧管理

在復雜層級結構中，矩陣需要逐級傳遞：

function updateWorldMatrices(object, parentMatrix) {if (!parentMatrix) parentMatrix = new THREE.Matrix4();// 計算本地矩陣object.updateMatrix();// 組合世界矩陣object.matrixWorld.multiplyMatrices(parentMatrix, object.matrix);// 遞歸處理子對象for (let child of object.children) {updateWorldMatrices(child, object.matrixWorld);}
}

四、關鍵矩陣系統解析

4.1 模型視圖投影矩陣（MVP）

// 獲取三個關鍵矩陣
const modelMatrix = mesh.matrixWorld;
const viewMatrix = camera.matrixWorldInverse;
const projectionMatrix = camera.projectionMatrix;// 組合MVP矩陣
const mvpMatrix = new THREE.Matrix4().multiplyMatrices(projectionMatrix, viewMatrix).multiply(modelMatrix);

4.2 法線矩陣（Normal Matrix）

const normalMatrix = new THREE.Matrix3();
normalMatrix.getNormalMatrix(modelViewMatrix);// 在著色器中使用
material.onBeforeCompile = (shader) => {shader.uniforms.normalMatrix = { value: normalMatrix };shader.vertexShader = `uniform mat3 normalMatrix;${shader.vertexShader}`.replace('#include <beginnormal_vertex>', `objectNormal = normalMatrix * objectNormal;`);
};

五、性能優化策略

5.1 矩陣更新優化

// 禁用自動矩陣更新
mesh.matrixAutoUpdate = false;// 手動批量更新
function updateScene() {objects.forEach(obj => {obj.updateMatrix();obj.updateMatrixWorld(true); // 跳過子對象更新});
}

5.2 矩陣緩存重用

const _tempMatrix = new THREE.Matrix4();function calculateTransform(position, rotation, scale) {return _tempMatrix.compose(position, rotation, scale).clone();
}

六、常見問題診斷

6.1 變換順序錯誤

癥狀：物體縮放導致旋轉軸偏移
解決方案：

// 錯誤方式：
mesh.position.set(0, 5, 0);
mesh.rotation.y = Math.PI/2;
mesh.scale.set(2, 2, 2);// 正確方式：
mesh.scale.set(2, 2, 2);
mesh.rotation.y = Math.PI/2;
mesh.position.set(0, 5, 0);

6.2 矩陣更新遺漏

癥狀：子對象未跟隨父級移動
解決方案：

parent.add(child);
parent.matrixWorldNeedsUpdate = true; // 強制更新世界矩陣

七、高階應用實例

7.1 自定義矩陣動畫

function matrixAnimation(mesh, duration) {const startMatrix = mesh.matrix.clone();const endMatrix = new THREE.Matrix4().makeRotationY(Math.PI).multiply(new THREE.Matrix4().makeTranslation(5, 0, 0));new TWEEN.Tween({ t: 0 }).to({ t: 1 }, duration).onUpdate(({ t }) => {mesh.matrix = startMatrix.clone().lerp(endMatrix, t);mesh.matrixWorldNeedsUpdate = true;}).start();
}

7.2 GPU矩陣計算

// 頂點著色器中使用自定義矩陣
const material = new THREE.ShaderMaterial({uniforms: {customMatrix: { value: new THREE.Matrix4() }},vertexShader: `uniform mat4 customMatrix;void main() {gl_Position = projectionMatrix * modelViewMatrix * customMatrix * vec4(position, 1.0);}`
});

八、調試與可視化工具

8.1 矩陣可視化

function printMatrix(label, matrix) {console.log(`${label}:`);const te = matrix.elements;for (let i = 0; i < 4; i++) {console.log(te[i*4].toFixed(2), te[i*4+1].toFixed(2),te[i*4+2].toFixed(2),te[i*4+3].toFixed(2));}
}

8.2 坐標系輔助顯示

const axisHelper = new THREE.AxesHelper(5);
mesh.add(axisHelper);// 實時顯示世界坐標系
function updateAxisHelper() {axisHelper.matrixWorld.copy(mesh.matrixWorld);axisHelper.matrixWorld.decompose(axisHelper.position,axisHelper.quaternion,axisHelper.scale);
}

九、最佳實踐總結

1. 優先使用高層API：盡量通過position、rotation、scale屬性操作對象
2. 謹慎直接修改矩陣：僅在必要時直接操作矩陣元素
3. 注意更新順序：修改屬性后及時調用updateMatrix()
4. 重用矩陣對象：避免頻繁創建新矩陣實例
5. 理解空間轉換鏈：局部坐標 -> 世界坐標 -> 視圖坐標 -> 裁剪坐標

通過掌握矩陣與向量的奧秘，開發者可以：
? 實現精準的物理碰撞檢測
? 創建電影級動態光影效果
? 構建工業級數字孿生系統
? 開發復雜機械運動仿真

建議結合Three.js官方文檔中的Matrix4和Vector3API參考進行實踐，并利用瀏覽器開發者工具實時觀察矩陣變化。