priority
row first
[
1,2,3,4
5,6,7,8,
9,10,11,12
]
If it is row-first, the reading order as above is 1234, 5678, 9101112
column first
[
1,2,3,4
5,6,7,8,
9,10,11,12
]
If it is row priority, the reading order as above is 159, 2610, 3711, 4812
THREE priority rule
All internally calculated and stored matrices are column-first, but row-first is more suitable for human reading order, so the Matrix.set method uses row-first reading, and reads are column-first.
const a = new THREE.Matrix3()
a.set(1,2,3,4,5,6,7,8,9)
console.log('矩阵: ====>', a.elements) // (9) [1, 4, 7, 2, 5, 8, 3, 6, 9]
For reading, the following matrices are displayed row-first
row-first, column-first
set( n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44 ) {
const te = this.elements;
te[ 0 ] = n11; te[ 4 ] = n12; te[ 8 ] = n13; te[ 12 ] = n14;
te[ 1 ] = n21; te[ 5 ] = n22; te[ 9 ] = n23; te[ 13 ] = n24;
te[ 2 ] = n31; te[ 6 ] = n32; te[ 10 ] = n33; te[ 14 ] = n34;
te[ 3 ] = n41; te[ 7 ] = n42; te[ 11 ] = n43; te[ 15 ] = n44;
return this;
}
The set method converts a row-major matrix into a column-major matrix, and all matrix calculations are converted to column-major by the set method
ApplyMatrix4
applyMatrix4( m ) {
const x = this.x, y = this.y, z = this.z;
const e = m.elements;
const w = 1 / ( e[ 3 ] * x + e[ 7 ] * y + e[ 11 ] * z + e[ 15 ] );
this.x = ( e[ 0 ] * x + e[ 4 ] * y + e[ 8 ] * z + e[ 12 ] ) * w;
this.y = ( e[ 1 ] * x + e[ 5 ] * y + e[ 9 ] * z + e[ 13 ] ) * w;
this.z = ( e[ 2 ] * x + e[ 6 ] * y + e[ 10 ] * z + e[ 14 ] ) * w;
return this;
}
The parameter m of applyMatrix4 is the column-major matrix transformed by the set method
According to the above method, it is easy to derive the translation matrix:
const a = new THREE.Matrix4()
a.set(
1, 0, 0, 1,
0, 1, 0, 1,
0, 0, 1, 1,
0, 0, 0, 1
)
This is a matrix with xyz translated by 1 unit respectively. So know the general matrix of the translation matrix
1, 0, 0, dx,
0, 1, 0, dy,
0, 0, 1, dz,
0, 0, 0, 1
For the rotation matrix, it is inevitable to have a relationship with trigonometric functions.
For rotation, counterclockwise rotation is a positive angle, and clockwise rotation is a negative angle.
The rotation matrix about the X axis is easy to write according to the above figure
[
1, 0, 0, 0,
0, cosN, -sinN, 0,
0, sinN, cosN, 0,
0, 0, 0, 1
]
For any axis rotation, you can directly look at the source code of threejs
makeRotationAxis( axis, angle ) {
// Based on http://www.gamedev.net/reference/articles/article1199.asp
const c = Math.cos( angle );
const s = Math.sin( angle );
const t = 1 - c;
const x = axis.x, y = axis.y, z = axis.z;
const tx = t * x, ty = t * y;
this.set(
tx * x + c, tx * y - s * z, tx * z + s * y, 0,
tx * y + s * z, ty * y + c, ty * z - s * x, 0,
tx * z - s * y, ty * z + s * x, t * z * z + c, 0,
0, 0, 0, 1
);
return this;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。