three.js Matrix4

2023-02-16 17:46 更新

表示為一個(gè) 4x4 matrix. 

在3D計(jì)算機(jī)圖形學(xué)中,4x4矩陣最常用的用法是作為一個(gè)變換矩陣Transformation Matrix。 有關(guān)WebGL中使用的變換矩陣的介紹,請(qǐng)參閱本教程this tutorial。

這使得表示三維空間中的一個(gè)點(diǎn)的向量Vector3通過(guò)乘以矩陣來(lái)進(jìn)行轉(zhuǎn)換,如平移、旋轉(zhuǎn)、剪切、縮放、反射、正交或透視投影等。這就是把矩陣應(yīng)用到向量上。

任何3D物體Object3D都有三個(gè)關(guān)聯(lián)的矩陣:

  • Object3D.matrix: 存儲(chǔ)物體的本地變換矩陣。 這是對(duì)象相對(duì)于其父對(duì)象的變換矩陣。
  • Object3D.matrixWorld: 對(duì)象的全局或世界變換矩陣。如果對(duì)象沒(méi)有父對(duì)象,那么這與存儲(chǔ)在矩陣matrix中的本地變換矩陣相同。
  • Object3D.modelViewMatrix: 表示對(duì)象相對(duì)于攝像機(jī)坐標(biāo)系的變換矩陣, 一個(gè)對(duì)象的 modelViewMatrix 是物體世界變換矩陣乘以攝像機(jī)相對(duì)于世界空間變換矩陣的逆矩陣。

攝像機(jī)Cameras 有三個(gè)額外的四維矩陣:

  • Camera.matrixWorldInverse: 視矩陣 - 攝像機(jī)世界坐標(biāo)變換的逆矩陣。
  • Camera.projectionMatrix: 投影變換矩陣,表示將場(chǎng)景中的信息投影到裁剪空間。
  • Camera.projectionMatrixInverse: 投影變換矩陣的逆矩陣。

注意:物體的正規(guī)矩陣 Object3D.normalMatrix 并不是一個(gè)4維矩陣,而是一個(gè)三維矩陣Matrix3。

注意行優(yōu)先列優(yōu)先的順序。

設(shè)置set()方法參數(shù)采用行優(yōu)先row-major, 而它們?cè)趦?nèi)部是用列優(yōu)先column-major順序存儲(chǔ)在數(shù)組當(dāng)中。

這意味著

const m = new THREE.Matrix4();

m.set( 11, 12, 13, 14,
       21, 22, 23, 24,
       31, 32, 33, 34,
       41, 42, 43, 44 );

元素?cái)?shù)組elements將存儲(chǔ)為:

m.elements = [ 11, 21, 31, 41,
               12, 22, 32, 42,
               13, 23, 33, 43,
               14, 24, 34, 44 ];

在內(nèi)部,所有的計(jì)算都是使用列優(yōu)先順序進(jìn)行的。然而,由于實(shí)際的排序在數(shù)學(xué)上沒(méi)有什么不同, 而且大多數(shù)人習(xí)慣于以行優(yōu)先順序考慮矩陣,所以three.js文檔以行為主的順序顯示矩陣。 請(qǐng)記住,如果您正在閱讀源代碼,您必須對(duì)這里列出的任何矩陣進(jìn)行轉(zhuǎn)置transpose,以理解計(jì)算。

提取位置(平移)、旋轉(zhuǎn)和縮放

有多種選項(xiàng)可用于從 Matrix4 中提取位置、旋轉(zhuǎn)和縮放。

  • Vector3.setFromMatrixPosition:可用于提取位置相關(guān)的分量。
  • Vector3.setFromMatrixScale:可用于提取縮放相關(guān)的分量。
  • Quaternion.setFromRotationMatrix, Euler.setFromRotationMatrix 或 extractRotation:可用于從純(未縮放)矩陣中提取旋轉(zhuǎn)相關(guān)分量。
  • decompose:可用于一次性提取位置、旋轉(zhuǎn)和縮放

構(gòu)造器(Constructor)

Matrix4()

創(chuàng)建并初始化一個(gè)4X4的單位矩陣identity matrix.

屬性(Properties)

.elements : Array

矩陣列優(yōu)先column-major列表。

方法(Methods)

.clone () : Matrix4

創(chuàng)建一個(gè)新的矩陣,元素elements與該矩陣相同。

.compose ( position : Vector3, quaternion : Quaternion, scale : Vector3 ) : this

設(shè)置將該對(duì)象位置 position,四元數(shù)quaternion 和 縮放scale 組合變換的矩陣。

.copy ( m : Matrix4 ) : this

將矩陣m的元素elements復(fù)制到當(dāng)前矩陣中。

.copyPosition ( m : Matrix4 ) : this

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

.decompose ( position : Vector3, quaternion : Quaternion, scale : Vector3 ) : this

將矩陣分解到給定的平移position ,旋轉(zhuǎn) quaternion,縮放scale分量中。

注意:并非所有矩陣都可以通過(guò)這種方式分解。 例如,如果一個(gè)對(duì)象有一個(gè)非均勻縮放的父對(duì)象,那么該對(duì)象的世界矩陣可能是不可分解的,這種方法可能不合適。

.determinant () : Float

計(jì)算并返回矩陣的行列式determinant 。

基于這個(gè)的方法概述here。

.equals ( m : Matrix4 ) : Boolean

如果矩陣m 與當(dāng)前矩陣所有對(duì)應(yīng)元素相同則返回true。

.extractBasis ( xAxis : Vector3, yAxis : Vector3, zAxis : Vector3 ) : this

將矩陣的基向量basis提取到指定的3個(gè)軸向量中。 如果矩陣如下:

a, b, c, d,
e, f, g, h,
i, j, k, l,
m, n, o, p

然后x軸y軸z軸被設(shè)為:

xAxis = (a, e, i)
yAxis = (b, f, j)
zAxis = (c, g, k)

.extractRotation ( m : Matrix4 ) : this

將給定矩陣m的旋轉(zhuǎn)分量提取到該矩陣的旋轉(zhuǎn)分量中。

.fromArray ( array : Array, offset : Integer ) : this

array - 用來(lái)存儲(chǔ)設(shè)置元素?cái)?shù)據(jù)的數(shù)組
offset - (可選參數(shù)) 數(shù)組的偏移量,默認(rèn)值為 0。

使用基于列優(yōu)先格式column-major的數(shù)組來(lái)設(shè)置該矩陣。

.invert () : this

將當(dāng)前矩陣翻轉(zhuǎn)為它的逆矩陣,使用 analytic method 解析方式。你不能對(duì)行或列為 0 的矩陣進(jìn)行翻轉(zhuǎn),如果你嘗試這樣做,該方法將生成一個(gè)零矩陣。

.getMaxScaleOnAxis () : Float

獲取3個(gè)軸方向的最大縮放值。

.identity () : this

將當(dāng)前矩陣重置為單位矩陣identity matrix。

.lookAt ( eye : Vector3, target : Vector3, up : Vector3 ) : this

構(gòu)造一個(gè)旋轉(zhuǎn)矩陣,從eye 指向 target,由向量 up 定向。

.makeRotationAxis ( axis : Vector3, theta : Float ) : this

axis — 旋轉(zhuǎn)軸,需要被歸一化。
theta — 旋轉(zhuǎn)量(弧度)。

設(shè)置當(dāng)前矩陣為圍繞軸 axis 旋轉(zhuǎn)量為 theta弧度。
這是一種有點(diǎn)爭(zhēng)議但在數(shù)學(xué)上可以替代通過(guò)四元數(shù)Quaternions旋轉(zhuǎn)的辦法。 請(qǐng)參閱此處here的討論。

.makeBasis ( xAxis : Vector3, yAxis : Vector3, zAxis : Vector3 ) : this

通過(guò)給定的三個(gè)向量設(shè)置該矩陣為基矩陣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

.makePerspective ( left : Float, right : Float, top : Float, bottom : Float, near : Float, far : Float ) : this

創(chuàng)建一個(gè)透視投影矩陣perspective projection。 在引擎內(nèi)部由PerspectiveCamera.updateProjectionMatrix()使用。

.makeOrthographic ( left : Float, right : Float, top : Float, bottom : Float, near : Float, far : Float ) : this

創(chuàng)建一個(gè)正交投影矩陣orthographic projection。 在引擎內(nèi)部由OrthographicCamera.updateProjectionMatrix()使用。

.makeRotationFromEuler ( euler : Euler ) : this

將傳入的歐拉角轉(zhuǎn)換為該矩陣的旋轉(zhuǎn)分量(左上角的3x3矩陣)。 矩陣的其余部分被設(shè)為單位矩陣。根據(jù)歐拉角euler的旋轉(zhuǎn)順序order,總共有六種可能的結(jié)果。 詳細(xì)信息,請(qǐng)參閱本頁(yè)this page。

.makeRotationFromQuaternion ( q : Quaternion ) : this

將這個(gè)矩陣的旋轉(zhuǎn)分量設(shè)置為四元數(shù)q指定的旋轉(zhuǎn),如下鏈接所訴here。 矩陣的其余部分被設(shè)為單位矩陣。因此,給定四元數(shù)q = w + xi + yj + zk,得到的矩陣為:

1-2y2-2z2    2xy-2zw    2xz+2yw    0
2xy+2zw      1-2x2-2z2  2yz-2xw    0
2xz-2yw      2yz+2xw    1-2x2-2y2  0
0            0          0          1

.makeRotationX ( theta : Float ) : this

theta — 以弧度為單位的旋轉(zhuǎn)角度。

把該矩陣設(shè)置為繞x軸旋轉(zhuǎn)弧度theta (θ)大小的矩陣。 結(jié)果如下:

1 0      0        0
0 cos(θ) -sin(θ)  0
0 sin(θ) cos(θ)   0
0 0      0        1

.makeRotationY ( theta : Float ) : this

theta — 以弧度為單位的旋轉(zhuǎn)角度。

把該矩陣設(shè)置為繞Y軸旋轉(zhuǎn)弧度theta (θ)大小的矩陣。 結(jié)果如下:

cos(θ)  0 sin(θ) 0
0       1 0      0
-sin(θ) 0 cos(θ) 0
0       0 0      1

.makeRotationZ ( theta : Float ) : this

theta — 以弧度為單位的旋轉(zhuǎn)角度。

把該矩陣設(shè)置為繞z軸旋轉(zhuǎn)弧度theta (θ)大小的矩陣。 結(jié)果如下:

cos(θ) -sin(θ) 0 0
sin(θ) cos(θ)  0 0
0      0       1 0
0      0       0 1

.makeScale ( x : Float, y : Float, z : Float ) : this

x - 在X軸方向的縮放比。
y - 在Y軸方向的縮放比。
z - 在Z軸方向的縮放比。

將這個(gè)矩陣設(shè)置為縮放變換:

x, 0, 0, 0,
0, y, 0, 0,
0, 0, z, 0,
0, 0, 0, 1

.makeShear ( x : Float, y : Float, z : Float ) : this

x - 在X軸上剪切的量。
y - 在Y軸上剪切的量。
z - 在Z軸上剪切的量。

將此矩陣設(shè)置為剪切變換:

1, y, z, 0,
x, 1, z, 0,
x, y, 1, 0,
0, 0, 0, 1

.makeTranslation ( x : Float, y : Float, z : Float ) : this

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

設(shè)置該矩陣為平移變換:

1, 0, 0, x,
0, 1, 0, y,
0, 0, 1, z,
0, 0, 0, 1

.multiply ( m : Matrix4 ) : this

將當(dāng)前矩陣乘以矩陣m。

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

設(shè)置當(dāng)前矩陣為矩陣a x 矩陣b。

.multiplyScalar ( s : Float ) : this

當(dāng)前矩陣所有的元素乘以該縮放值s

.premultiply ( m : Matrix4 ) : this

將矩陣m乘以當(dāng)前矩陣。

.scale ( v : Vector3 ) : this

將該矩陣的列向量乘以對(duì)應(yīng)向量v的分量。

.set ( n11 : Float, n12 : Float, n13 : Float, n14 : Float, n21 : Float, n22 : Float, n23 : Float, n24 : Float, n31 : Float, n32 : Float, n33 : Float, n34 : Float, n41 : Float, n42 : Float, n43 : Float, n44 : Float ) : this

以行優(yōu)先的格式將傳入的數(shù)值設(shè)置給該矩陣中的元素elements。

.setFromMatrix3 ( m : Matrix3 ) : this

根據(jù)參數(shù) m 的值,設(shè)置當(dāng)前矩陣左上 3x3 的矩陣值。

.setPosition ( v : Vector3 ) : this

.setPosition ( x : Float, y : Float, z : Float ) : this // optional API

取傳入?yún)?shù)v : Vector3中值設(shè)置該矩陣的位置分量,不影響該矩陣的其余部分——即,如果該矩陣當(dāng)前為:

a, b, c, d,
e, f, g, h,
i, j, k, l,
m, n, o, p

變成:

a, b, c, v.x,
e, f, g, v.y,
i, j, k, v.z,
m, n, o, p

.toArray ( array : Array, offset : Integer ) : Array

array - (可選參數(shù)) 存儲(chǔ)矩陣元素的數(shù)組,如果未指定會(huì)創(chuàng)建一個(gè)新的數(shù)組。
offset - (可選參數(shù)) 存放矩陣元素?cái)?shù)組的偏移量。

使用列優(yōu)先column-major格式將此矩陣的元素寫入數(shù)組中。

.transpose () : this

將該矩陣轉(zhuǎn)置Transposes。

源碼(Source)

src/math/Matrix4.js


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)