Three.js中矩陣和向量的使用教程

最終的變換向量 = 原始向量 * 變換矩陣

用我們上面例子中的方法來還原這個公式，即：

var vector = new THREE.Vector3(20, 20, 0);
var matrix = new THREE.Matrix4();
matrix.makeTranslation(10, 40, 0);
vector.applyMatrix4(matrix);

除了平移，Three的API中還提供了rotation和scale，scale變化很簡單，它將使用makeScale(x, y, z)這個方法來表示縮放。

而旋轉則相對復雜許多，Three.js提供以下旋轉方法：

matrix.makeRotationX(angle);
matrix.makeRotationY(angle);
matrix.makeRotationZ(angle);
matrix.makeRotationAxis(axis, angle);
matrix.makeRotationFromEuler(euler);
matrix.makeRotationFromQuaternion(quaternion);

前三個方法分別代表的是繞X、Y、Z三個軸旋轉，無需贅述。

第四個方法是前三個方法的整合版，第一個參數表示的是代表xyz的THREE.Vector3，第二個參數是旋轉的弧度。下面兩行代碼是等價的：

matrix.makeRotationX(Math.PI);
matrix.makeRotationAxis(new THREE.Vector3(1, 0, 0), Math.PI);

第五個方法表示圍繞x、y和z軸的旋轉，這是表示旋轉最常用的方式；第六個方法是一種基于軸和角度表示旋轉的替代方法。

最后，Three.js api提供了一種方法來創建表示平移，旋轉和縮放的組合的矩陣 -- matrix.compose：

var translation = new THREE.Vector3();
var rotation = new THREE.Quaternion();
var scale = new THREE.Vector3();
var matrix = new THREE.Matrix4();
matrix.compose(translation, rotation, scale);

矩陣相乘

矩陣乘法的意義在于疊加。

上圖表示了三個變化：旋轉、縮放和移動。

通過按次序相乘，三個變化矩陣可以得出一個最終的變化矩陣：

combinedMatrix = rotationMatrix * scaleMatrix * translationMatrix;

Three.js里提供了兩種矩陣相乘的方法：

第一種方法表示將矩陣乘以另一個矩陣；而第二種方法代表的是將矩陣設置為matrixA * matrixB的結果。

我們在示例中也使用到了第一個方法：將圓柱體的矩陣乘以新的平移矩陣，和將球的矩陣乘以一個旋轉矩陣。

需要注意的是，乘法交換律不適用于矩陣乘法，矩陣乘法是具有次序的，先旋轉再移動和先移動再旋轉的結果是完全不同的。

矩陣的逆

在數字的運算里，除法相當于是乘法的“撤銷”操作：

4 x 5 = 20
20 / 5 = 4

但是在矩陣計算里，這個守則同樣是不適用的。我們不能用向量去除一個矩陣，我們只能用向量去乘以一個矩陣的逆矩陣，來完成“撤銷”的操作。

變化后的向量 = 原始向量 * 變化矩陣;
逆矩陣 = 變化矩陣.inverse();
原始向量 = 變化后的向量 * 逆矩陣；

逆矩陣表示的是相反的變換。

Three.js里提供了一種計算逆矩陣的方法：

var matrix = new THREE.Matrix4();
var inverseMatrix = new THREE.Matrix4();
matrix.getInverse(inverseMatrix);

除此之外，逆矩陣還應用在3D場景中處理相機對象的時候。

最后

矩陣在3D世界里是一種十分強大的工具，它能夠將任意變換都表示為一種相似的結構，并采用相同的計算過程。而實際上，矩陣的世界遠遠比這里介紹的內容更多，希望通過這些簡要的介紹，可以讓我們進入到一個更深的領域，并游刃有余的利用他處理圖形開發中更復雜的場景。

好了，

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com