three.js 數學方法之Matrix4

今天郭先生說一說three.js中的Matrix4，相較於Matrix3來說，Matrix4和three.js聯系的更緊密，因為在4x4矩陣最常用的用法是作為一個變換矩陣。這使得表示三維空間中的一個點的向量Vector3通過乘以矩陣來進行轉換，如平移、旋轉、剪切、縮放、反射、正交或透視投影等。這就是把矩陣應用到向量上。

1. Object3D矩陣

任何3D物體Object3D都有三個關聯的矩陣：

• Object3D.matrix: 存儲物體的本地變換。 這是對象相對於其父對象的變換。
• Object3D.matrixWorld: 對象的全局或世界變換。如果對象沒有父對象，那么這與存儲在矩陣matrix中的本地變換相同。
• Object3D.modelViewMatrix: 表示對象相坐標相對於攝像機空間坐標轉換， 一個對象的 modelViewMatrix 是物體世界變換矩陣乘以攝像機相對於世界空間變換矩陣的逆矩陣。

攝像機Cameras 有兩個額外的四維矩陣:

• Camera.matrixWorldInverse: 視圖矩陣 - 攝像機世界坐標變換的逆矩陣。
• Camera.projectionMatrix: 投影矩陣 - 表示將場景中的信息投影到裁剪空間。

注意：物體的正規矩陣 Object3D.normalMatrix 並不是一個4維矩陣，而是一個三維矩陣Matrix3。下面舉例子說明一下這幾個矩陣。

var geom = new THREE.BoxGeometry(); //創建一個幾何體
var mate = new THREE.MeshNormalMaterial(); //創建一個材質
var mesh = new THREE.Mesh(geom, mate);  //創建一個網格
var group = new THREE.Group(); //創建一個組
mesh.position.setX(9); //設置網格的位置
group.add(mesh); //將網格添加到組里
group.position.setX(8); //設置組的位置
scene.add(group); //將組添加到場景中
scene.position.setX(7); //設置場景的位置

下面我們來分析一下這幾個矩陣，mesh、group和scene的Object3D.matrix矩陣分別是

• mesh – elements: (16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 9, 0, 0, 1]
• group – elements: (16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 8, 0, 0, 1]
• scene – elements: (16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7, 0, 0, 1]

可以看出他們本地變換矩陣的x方向位置分量分別是9、8和7，很明顯，Object3D.matrix是相對於父元素的變換，我們再來看看mesh、group和scene的Object3D.matrixWorld矩陣

• mesh – elements: (16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24, 0, 0, 1]
• group – elements: (16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 15, 0, 0, 1]
• scene – elements: (16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7, 0, 0, 1]

其中scene世界變換矩陣x方向的位置分量是7，group的是15（7+8），mesh的是24（7+8+9），也就是說世界變換矩陣是該元素相對於世界坐標系的變換，也是該元素的本地變換和該元素父級世界變換的乘積。
說Object3D.modelViewMatrix之前，先說一下Camera.matrixWorldInverse矩陣，這個矩陣有很重要的意義，

camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,0.1,10000); 
camera.position.set(0, 0, 60); 
scene.add(camera);

由於相機是加到場景里面的所以相機的本地變換矩陣是elements: (16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 60, 1]，相機的世界變換矩陣是elements: (16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7, 0, 60, 1]，相機的視圖矩陣是elements: (16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -7, 0, -60, 1]，Camera.projectionMatrix是投影矩陣，它和相機的方向，視角等等有關。

Object3D.modelViewMatrix是對象相坐標相對於攝像機空間坐標轉換，如上mesh的世界變換是elements: (16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24, 0, 0, 1]，攝像機視圖矩陣陣elements: (16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -7, 0, -60, 1]，那么將二者相乘，既是mesh的Object3D.modelViewMatrix的值elements: (16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 17, 0, -60, 1]。
以上是我自己在矩陣上推到出的結論。

2. Matrix4的屬性

1. elements

矩陣列優先column-major列表。

2. isMatrix4

用於判定此對象或者此類的派生對象是否是三維矩陣。默認值為 true。

3. Matrix4的方法

1. set(number, number, number …): Matrix4

設置set()方法參數采用行優先row-major， 而它們在內部是用列優先column-major順序存儲在數組當中。方法同三維矩陣

2. identity(): Matrix4

創建並初始化一個4X4的單位矩陣identity matrix。方法同三維矩陣。

3. clone(): this

創建一個新的矩陣，元素elements與該矩陣相同。方法同三維矩陣。

4. copy( m: Matrix4 ): this

將矩陣m的元素elements復制到當前矩陣中。方法同三維矩陣。

5. copyPosition( m: Matrix4 ): Matrix4

將給定矩陣m : Matrix4 的平移分量拷貝到當前矩陣中。

var matrix1 = new THREE.Matrix4().makeTranslation(3,3,3);
var matrix2 = new THREE.Matrix4().makeScale(2,2,2);
matrix2.copyPosition(matrix1);
console.log(matrix2); //返回elements: (16) [2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 3, 3, 3, 1]

6. extractBasis( xAxis: Vector3, yAxis: Vector3, zAxis: Vector3 ): Matrix4

將矩陣的基向量basis提取到指定的3個軸向量中。方法同三維矩陣。

7. makeBasis( xAxis: Vector3, yAxis: Vector3, zAxis: Vector3 ): Matrix4

通過給定的三個向量設置該矩陣為基矩陣basis:
xAxis.x, yAxis.x, zAxis.x, 0,
xAxis.y, yAxis.y, zAxis.y, 0,
xAxis.z, yAxis.z, zAxis.z, 0,
0, 0, 0, 1

8. extractRotation( m: Matrix4 ): Matrix4

將給定矩陣m的旋轉分量提取到該矩陣的旋轉分量中。

var matrix1 = new THREE.Matrix4().makeRotationZ(Math.PI/6);
var matrix2 = new THREE.Matrix4().makeScale(2,2,2);
matrix2.extractRotation(matrix1)
console.log(matrix2); //返回elements: (16) [0.8660254037844387, 0.49999999999999994, 0, 0, -0.49999999999999994, 0.8660254037844387, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

9. makeRotationFromEuler( euler: Euler ): Matrix4

將傳入的歐拉角轉換為該矩陣的旋轉分量(左上角的3x3矩陣)。 矩陣的其余部分被設為單位矩陣。根據歐拉角euler的旋轉順序order，總共有六種可能的結果。

var euler = new THREE.Euler(0,0,Math.PI/6, 'XYZ');
var matrix = new THREE.Matrix4().makeScale(2,2,2);
matrix.makeRotationFromEuler(euler)
console.log(matrix); //返回elements: (16) [0.8660254037844387, 0.49999999999999994, 0, 0, -0.49999999999999994, 0.8660254037844387, 0, 0, 0, -0, 1, 0, 0, 0, 0, 1]

因為都是繞z軸旋轉30度，所以返回結果和上面一樣

10. makeRotationFromQuaternion( q: Quaternion ): Matrix4

將這個矩陣的旋轉分量設置為四元數q指定的旋轉，使用方法同makeRotationFromEuler。

11. lookAt( eye: Vector3, target: Vector3, up: Vector3 ): Matrix4

構造一個旋轉矩陣，從eye 指向 center，由向量 up : Vector3 定向。

var eye = new THREE.Vector3(0,0,0);
var target = new THREE.Vector3(1,0,0);
var up = new THREE.Vector3(0,0,1);
var matrix = new THREE.Matrix4();
matrix.lookAt(eye,target,up);
console.log(matrix); //返回elements: (16) [0, -0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 0, 1]

12. multiply( m: Matrix4 ): Matrix4

將當前矩陣乘以矩陣m。方法同三維矩陣。

13. premultiply( m: Matrix4 ): Matrix4

將矩陣m乘以當前矩陣。方法同三維矩陣。

14. multiplyMatrices( a: Matrix4, b: Matrix4 ): Matrix4

設置當前矩陣為矩陣a x 矩陣b。方法同三維矩陣。

15. multiplyScalar( s: number ): Matrix4

當前矩陣所有的元素乘以該縮放值s。方法同三維矩陣。

16. determinant(): number;

計算並返回矩陣的行列式determinant。方法同三維矩陣。

17. transpose(): Matrix4

將該矩陣轉置Transposes。方法同三維矩陣。

18. setPosition( v: Vector3 | number, y?: number, z?: number ): Matrix4

取傳入參數v : Vector3中值設置該矩陣的位置分量，不影響該矩陣的其余部分——即。或者直接傳遞向量的分量值（v,y,z），下面是源碼:

setPosition: function ( x, y, z ) {
    var te = this.elements;
    if ( x.isVector3 ) {
        te[ 12 ] = x.x;
        te[ 13 ] = x.y;
        te[ 14 ] = x.z;
    } else {
        te[ 12 ] = x;
        te[ 13 ] = y;
        te[ 14 ] = z;
    }
    return this;
}

19. getInverse( m: Matrix4 ): Matrix4

使用逆矩陣計算方法analytic method， 將當前矩陣設置為給定矩陣的逆矩陣inverse，如果throwOnDegenerate 參數沒有設置且給定矩陣不可逆，那么將當前矩陣設置為3X3單位矩陣。逆矩陣求法可以是用伴隨矩陣的方法，同三維矩陣。

20. scale( v: Vector3 ): Matrix4

將該矩陣的列向量乘以對應向量v的分量。

var matrix = new THREE.Matrix4();
matrix.scale(new THREE.Vector3(1,2,3));
console.log('matrix', matrix); //返回elements: (16) [1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 1]

21. getMaxScaleOnAxis(): number

獲取3個軸方向的最大縮放值。

var matrix = new THREE.Matrix4().makeScale(2,3,4); 
matrix.getMaxScaleOnAxis(); //返回4

22. makeTranslation( x: number, y: number, z: number ): Matrix4

x - 在X軸上的平移量。y - 在Y軸上的平移量。z - 在Z軸上的平移量。不多說。

23. makeRotationX( theta: number ): Matrix4

把該矩陣設置為繞x軸旋轉弧度theta (θ)大小的矩陣。很簡單，不多說。

24. makeRotationY( theta: number ): Matrix4

把該矩陣設置為繞y軸旋轉弧度theta (θ)大小的矩陣。同上。

25. makeRotationZ( theta: number ): Matrix4

把該矩陣設置為繞z軸旋轉弧度theta (θ)大小的矩陣。同上。

26. makeRotationAxis( axis: Vector3, angle: number ): Matrix4

設置當前矩陣為圍繞軸 axis 旋轉量為 theta弧度。也不難。

var matrix = new THREE.Matrix4(); //一下兩個旋轉是相同的 matrix.makeRotationZ(Math.PI/4); 
matrix.makeRotationAxis(new THREE.Vector3(0,0,1), Math.PI/4);

27. makeScale( x: number, y: number, z: number ): Matrix4

x - 在X軸方向的縮放比。y - 在Y軸方向的縮放比。z - 在Z軸方向的縮放比。方法不難，就不多說了。

28. compose( translation: Vector3, rotation: Quaternion, scale: Vector3 ): Matrix4

設置將該對象由位置position，四元數quaternion 和 縮放scale 組合變換的矩陣。內部先調用makeRotationFromQuaternion( quaternion ) 再調用縮放scale( scale )最后是平移setPosition( position )。
這個方法集成了旋轉、縮放和平移。

//使用make系列的方法操作
Object3D.applyMatrix(new THREE.Matrix4().makeScale(2,1,1));
Object3D.applyMatrix(new THREE.Matrix4().makeTranslation(0,4,0));
Object3D.applyMatrix(new THREE.Matrix4().makeRotationZ(Math.PI/6));
//使用compose方法操作
var matrix = new THREE.Matrix4();
var trans = new THREE.Vector3(0,4,0);
var rotat = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/6));
var scale = new THREE.Vector3(2,1,1);
Object3D.applyMatrix4(matrix.compose(trans, rotat, scale)); //效果同上

29. decompose(translation: Vector3, rotation: Quaternion, scale: Vector3): Matrix4;

將矩陣分解到給定的平移position ,旋轉 quaternion，縮放scale分量中。就是compose的逆過程。隨便舉個例子。

var matrix = new THREE.Matrix4().set(1,2,3,4,2,3,4,5,3,4,5,6,4,5,6,7);
var trans = new THREE.Vector3();
var rotat = new THREE.Quaternion();
var scale = new THREE.Vector3();
matrix.decompose(trans, rotat, scale);
console.log(trans); //返回Vector3 {x: 4, y: 5, z: 6} 因為是隨便寫的，所以只有平移變量不需計算就可以看出來的
console.log(rotat); //返回Quaternion {_x: 0.05565363763555474, _y: -0.11863820054057297, _z: 0.051265314875937947, _w: 0.7955271896092125}
console.log(scale); //返回Vector3 {x: 3.7416573867739413, y: 5.385164807134504, z: 7.0710678118654755}

30. makePerspective(fov: number,aspect: number,near: number,far: number): Matrix4

創建一個透視投影矩陣perspective projection。 在引擎內部由PerspectiveCamera.updateProjectionMatrix()使用。

31. makeOrthographic(left: number,right: number,top: number,bottom: number,near: number,far: number): Matrix4;

創建一個正交投影矩陣orthographic projection。 在引擎內部由OrthographicCamera.updateProjectionMatrix()使用。

32. equals( matrix: Matrix4 ): boolean

如果矩陣m 與當前矩陣所有對應元素相同則返回true。

33. fromArray( array: number[], offset?: number ): Matrix4

使用基於列優先格式column-major的數組來設置該矩陣。方法同三維矩陣。

34. toArray( array?: number[], offset?: number ): number[]

使用列優先column-major格式將此矩陣的元素寫入數組中。

四維矩陣就先說到這里，我們以后將會經常看到他，無論是在變換中，還是在着色器中。

 

轉載請注明地址：郭先生的博客