You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
418 lines
16 KiB
418 lines
16 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<base href="../../../" />
|
|
<script src="page.js"></script>
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
|
</head>
|
|
<body>
|
|
<h1>[name]</h1>
|
|
|
|
<p class="desc">
|
|
A class representing a 4x4 [link:https://en.wikipedia.org/wiki/Matrix_(mathematics) matrix].<br /><br />
|
|
|
|
The most common use of a 4x4 matrix in 3D computer graphics is as a
|
|
[link:https://en.wikipedia.org/wiki/Transformation_matrix Transformation Matrix].
|
|
For an introduction to transformation matrices as used in WebGL, check out
|
|
[link:http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices this tutorial].<br /><br />
|
|
|
|
This allows a [page:Vector3] representing a point in 3D space to undergo transformations
|
|
such as translation, rotation, shear, scale, reflection, orthogonal or perspective projection
|
|
and so on, by being multiplied by the matrix. This is known as `applying`
|
|
the matrix to the vector.<br /><br />
|
|
|
|
Every [page:Object3D] has three associated Matrix4s:
|
|
<ul>
|
|
<li>
|
|
[page:Object3D.matrix]: This stores the local transform of the object. This is the object's transformation relative to its parent.
|
|
</li>
|
|
<li>
|
|
[page:Object3D.matrixWorld]: The global or world transform of the object. If the object has no parent, then this is identical to the local transform stored in [page:Object3D.matrix matrix].
|
|
</li>
|
|
<li>
|
|
[page:Object3D.modelViewMatrix]: This represents the object's transformation relative to the camera's coordinate system.
|
|
An object's modelViewMatrix is the object's matrixWorld pre-multiplied by the camera's matrixWorldInverse.
|
|
</li>
|
|
</ul>
|
|
|
|
[page:Camera Cameras] have three additional Matrix4s:
|
|
<ul>
|
|
<li>
|
|
[page:Camera.matrixWorldInverse]: The view matrix - the inverse of the Camera's [page:Object3D.matrixWorld matrixWorld].
|
|
</li>
|
|
<li>
|
|
[page:Camera.projectionMatrix]: Represents the information how to project the scene to clip space.
|
|
</li>
|
|
<li>
|
|
[page:Camera.projectionMatrixInverse]: The inverse of projectionMatrix.
|
|
</li>
|
|
</ul>
|
|
Note: [page:Object3D.normalMatrix] is not a Matrix4, but a [page:Matrix3].
|
|
</p>
|
|
|
|
<h2>A Note on Row-Major and Column-Major Ordering</h2>
|
|
<p>
|
|
The [page:set]() method takes arguments in [link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order row-major]
|
|
order, while internally they are stored in the [page:.elements elements] array in column-major order.<br /><br />
|
|
|
|
This means that calling
|
|
<code>
|
|
const m = new THREE.Matrix4();
|
|
|
|
m.set( 11, 12, 13, 14,
|
|
21, 22, 23, 24,
|
|
31, 32, 33, 34,
|
|
41, 42, 43, 44 );
|
|
|
|
</code>
|
|
will result in the [page:.elements elements] array containing:
|
|
<code>
|
|
m.elements = [ 11, 21, 31, 41,
|
|
12, 22, 32, 42,
|
|
13, 23, 33, 43,
|
|
14, 24, 34, 44 ];
|
|
</code>
|
|
and internally all calculations are performed using column-major ordering. However, as the actual ordering
|
|
makes no difference mathematically and most people are used to thinking about matrices in row-major order,
|
|
the three.js documentation shows matrices in row-major order. Just bear in mind that if you are reading the source
|
|
code, you'll have to take the [link:https://en.wikipedia.org/wiki/Transpose transpose] of any matrices outlined here to make sense of the calculations.
|
|
</p>
|
|
|
|
<h2>Extracting position, rotation and scale</h2>
|
|
<p>
|
|
There are several options available for extracting position, rotation and scale from a Matrix4.
|
|
<ul>
|
|
<li>
|
|
[page:Vector3.setFromMatrixPosition]: can be used to extract the translation component.
|
|
</li>
|
|
<li>
|
|
[page:Vector3.setFromMatrixScale]: can be used to extract the scale component.
|
|
</li>
|
|
<li>
|
|
[page:Quaternion.setFromRotationMatrix], [page:Euler.setFromRotationMatrix] or [page:.extractRotation extractRotation] can be used to extract the rotation component from a pure (unscaled) matrix.
|
|
</li>
|
|
<li>
|
|
[page:.decompose decompose] can be used to extract position, rotation and scale all at once.
|
|
</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<h2>Constructor</h2>
|
|
|
|
|
|
<h3>[name]()</h3>
|
|
|
|
<p>
|
|
Creates and initializes the [name] to the 4x4
|
|
[link:https://en.wikipedia.org/wiki/Identity_matrix identity matrix].
|
|
</p>
|
|
|
|
<h2>Properties</h2>
|
|
|
|
<h3>[property:Array elements]</h3>
|
|
<p>
|
|
A [link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order column-major]
|
|
list of matrix values.
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<h2>Methods</h2>
|
|
|
|
<h3>[method:Matrix4 clone]()</h3>
|
|
<p>Creates a new Matrix4 with identical [page:.elements elements] to this one.</p>
|
|
|
|
<h3>[method:this compose]( [param:Vector3 position], [param:Quaternion quaternion], [param:Vector3 scale] )</h3>
|
|
<p>
|
|
Sets this matrix to the transformation composed of [page:Vector3 position],
|
|
[page:Quaternion quaternion] and [page:Vector3 scale].
|
|
</p>
|
|
|
|
<h3>[method:this copy]( [param:Matrix4 m] )</h3>
|
|
<p>Copies the [page:.elements elements] of matrix [page:Matrix4 m] into this matrix.</p>
|
|
|
|
<h3>[method:this copyPosition]( [param:Matrix4 m] )</h3>
|
|
<p>
|
|
Copies the translation component of the supplied matrix [page:Matrix4 m] into this
|
|
matrix's translation component.
|
|
</p>
|
|
|
|
<h3>[method:this decompose]( [param:Vector3 position], [param:Quaternion quaternion], [param:Vector3 scale] )</h3>
|
|
<p>
|
|
Decomposes this matrix into its [page:Vector3 position], [page:Quaternion quaternion] and [page:Vector3 scale] components.<br/><br/>
|
|
Note: Not all matrices are decomposable in this way. For example, if an object has a non-uniformly scaled parent, then the object's world matrix may not be decomposable, and this method may not be appropriate.
|
|
</p>
|
|
|
|
<h3>[method:Float determinant]()</h3>
|
|
<p>
|
|
Computes and returns the
|
|
[link:https://en.wikipedia.org/wiki/Determinant determinant] of this matrix.<br /><br />
|
|
|
|
Based on the method outlined [link:http://www.euclideanspace.com/maths/algebra/matrix/functions/inverse/fourD/index.htm here].
|
|
</p>
|
|
|
|
<h3>[method:Boolean equals]( [param:Matrix4 m] )</h3>
|
|
<p>Return true if this matrix and [page:Matrix4 m] are equal.</p>
|
|
|
|
<h3>[method:this extractBasis]( [param:Vector3 xAxis], [param:Vector3 yAxis], [param:Vector3 zAxis] )</h3>
|
|
<p>
|
|
Extracts the [link:https://en.wikipedia.org/wiki/Basis_(linear_algebra) basis] of this
|
|
matrix into the three axis vectors provided. If this matrix is:
|
|
<code>
|
|
a, b, c, d,
|
|
e, f, g, h,
|
|
i, j, k, l,
|
|
m, n, o, p
|
|
</code>
|
|
then the [page:Vector3 xAxis], [page:Vector3 yAxis], [page:Vector3 zAxis] will be set to:
|
|
<code>
|
|
xAxis = (a, e, i)
|
|
yAxis = (b, f, j)
|
|
zAxis = (c, g, k)
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this extractRotation]( [param:Matrix4 m] )</h3>
|
|
<p>
|
|
Extracts the rotation component of the supplied matrix [page:Matrix4 m] into this matrix's
|
|
rotation component.
|
|
</p>
|
|
|
|
<h3>[method:this fromArray]( [param:Array array], [param:Integer offset] )</h3>
|
|
<p>
|
|
[page:Array array] - the array to read the elements from.<br />
|
|
[page:Integer offset] - ( optional ) offset into the array. Default is 0.<br /><br />
|
|
|
|
Sets the elements of this matrix based on an [page:Array array] in
|
|
[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order column-major] format.
|
|
</p>
|
|
|
|
<h3>[method:this invert]()</h3>
|
|
<p>
|
|
Inverts this matrix, using the [link:https://en.wikipedia.org/wiki/Invertible_matrix#Analytic_solution analytic method].
|
|
|
|
You can not invert with a determinant of zero. If you attempt this, the method produces a zero matrix instead.
|
|
</p>
|
|
|
|
<h3>[method:Float getMaxScaleOnAxis]()</h3>
|
|
<p>Gets the maximum scale value of the 3 axes.</p>
|
|
|
|
<h3>[method:this identity]()</h3>
|
|
<p>Resets this matrix to the [link:https://en.wikipedia.org/wiki/Identity_matrix identity matrix].</p>
|
|
|
|
<h3>[method:this lookAt]( [param:Vector3 eye], [param:Vector3 target], [param:Vector3 up] )</h3>
|
|
<p>
|
|
Constructs a rotation matrix, looking from [page:Vector3 eye] towards [page:Vector3 target]
|
|
oriented by the [page:Vector3 up] vector.
|
|
</p>
|
|
|
|
<h3>[method:this makeRotationAxis]( [param:Vector3 axis], [param:Float theta] )</h3>
|
|
<p>
|
|
[page:Vector3 axis] — Rotation axis, should be normalized.<br />
|
|
[page:Float theta] — Rotation angle in radians.<br /><br />
|
|
|
|
Sets this matrix as rotation transform around [page:Vector3 axis] by [page:Float theta] radians.<br />
|
|
|
|
This is a somewhat controversial but mathematically sound alternative to rotating via [page:Quaternion Quaternions].
|
|
See the discussion [link:https://www.gamedev.net/articles/programming/math-and-physics/do-we-really-need-quaternions-r1199 here].
|
|
</p>
|
|
|
|
<h3>[method:this makeBasis]( [param:Vector3 xAxis], [param:Vector3 yAxis], [param:Vector3 zAxis] )</h3>
|
|
<p>
|
|
Set this to the [link:https://en.wikipedia.org/wiki/Basis_(linear_algebra) basis] matrix consisting
|
|
of the three provided basis vectors:
|
|
<code>
|
|
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
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makePerspective]( [param:Float left], [param:Float right], [param:Float top], [param:Float bottom], [param:Float near], [param:Float far] )</h3>
|
|
<p>
|
|
Creates a [link:https://en.wikipedia.org/wiki/3D_projection#Perspective_projection perspective projection] matrix.
|
|
This is used internally by [page:PerspectiveCamera.updateProjectionMatrix]()
|
|
</p>
|
|
|
|
<h3>[method:this makeOrthographic]( [param:Float left], [param:Float right], [param:Float top], [param:Float bottom], [param:Float near], [param:Float far] )</h3>
|
|
<p>
|
|
Creates an [link:https://en.wikipedia.org/wiki/Orthographic_projection orthographic projection] matrix.
|
|
This is used internally by [page:OrthographicCamera.updateProjectionMatrix]().
|
|
</p>
|
|
|
|
<h3>[method:this makeRotationFromEuler]( [param:Euler euler] )</h3>
|
|
<p>
|
|
Sets the rotation component (the upper left 3x3 matrix) of this matrix to the rotation specified by the given [page:Euler Euler Angle].
|
|
The rest of the matrix is set to the identity. Depending on the [page:Euler.order order] of the [page:Euler euler], there are six possible outcomes.
|
|
See [link:https://en.wikipedia.org/wiki/Euler_angles#Rotation_matrix this page] for a complete list.
|
|
</p>
|
|
|
|
<h3>[method:this makeRotationFromQuaternion]( [param:Quaternion q] )</h3>
|
|
<p>
|
|
Sets the rotation component of this matrix to the rotation specified by [page:Quaternion q], as outlined
|
|
[link:https://en.wikipedia.org/wiki/Rotation_matrix#Quaternion here].
|
|
The rest of the matrix is set to the identity. So, given [page:Quaternion q] = w + xi + yj + zk, the resulting matrix will be:
|
|
<code>
|
|
1-2y²-2z² 2xy-2zw 2xz+2yw 0
|
|
2xy+2zw 1-2x²-2z² 2yz-2xw 0
|
|
2xz-2yw 2yz+2xw 1-2x²-2y² 0
|
|
0 0 0 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makeRotationX]( [param:Float theta] )</h3>
|
|
<p>
|
|
[page:Float theta] — Rotation angle in radians.<br /><br />
|
|
|
|
Sets this matrix as a rotational transformation around the X axis by [page:Float theta] (θ) radians.
|
|
The resulting matrix will be:
|
|
<code>
|
|
1 0 0 0
|
|
0 cos(θ) -sin(θ) 0
|
|
0 sin(θ) cos(θ) 0
|
|
0 0 0 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makeRotationY]( [param:Float theta] )</h3>
|
|
<p>
|
|
[page:Float theta] — Rotation angle in radians.<br /><br />
|
|
|
|
Sets this matrix as a rotational transformation around the Y axis by [page:Float theta] (θ) radians.
|
|
The resulting matrix will be:
|
|
<code>
|
|
cos(θ) 0 sin(θ) 0
|
|
0 1 0 0
|
|
-sin(θ) 0 cos(θ) 0
|
|
0 0 0 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makeRotationZ]( [param:Float theta] )</h3>
|
|
<p>
|
|
[page:Float theta] — Rotation angle in radians.<br /><br />
|
|
|
|
Sets this matrix as a rotational transformation around the Z axis by [page:Float theta] (θ) radians.
|
|
The resulting matrix will be:
|
|
<code>
|
|
cos(θ) -sin(θ) 0 0
|
|
sin(θ) cos(θ) 0 0
|
|
0 0 1 0
|
|
0 0 0 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makeScale]( [param:Float x], [param:Float y], [param:Float z] )</h3>
|
|
<p>
|
|
[page:Float x] - the amount to scale in the X axis.<br />
|
|
[page:Float y] - the amount to scale in the Y axis.<br />
|
|
[page:Float z] - the amount to scale in the Z axis.<br /><br />
|
|
|
|
Sets this matrix as scale transform:
|
|
<code>
|
|
x, 0, 0, 0,
|
|
0, y, 0, 0,
|
|
0, 0, z, 0,
|
|
0, 0, 0, 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makeShear]( [param:Float xy], [param:Float xz], [param:Float yx], [param:Float yz], [param:Float zx], [param:Float zy] )</h3>
|
|
<p>
|
|
[page:Float xy] - the amount to shear X by Y.<br />
|
|
[page:Float xz] - the amount to shear X by Z.<br />
|
|
[page:Float yx] - the amount to shear Y by X.<br />
|
|
[page:Float yz] - the amount to shear Y by Z.<br />
|
|
[page:Float zx] - the amount to shear Z by X.<br />
|
|
[page:Float zy] - the amount to shear Z by Y.<br /><br />
|
|
|
|
Sets this matrix as a shear transform:
|
|
<code>
|
|
1, yx, zx, 0,
|
|
xy, 1, zy, 0,
|
|
xz, yz, 1, 0,
|
|
0, 0, 0, 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this makeTranslation]( [param:Float x], [param:Float y], [param:Float z] )</h3>
|
|
<p>
|
|
[page:Float x] - the amount to translate in the X axis.<br />
|
|
[page:Float y] - the amount to translate in the Y axis.<br />
|
|
[page:Float z] - the amount to translate in the Z axis.<br /><br />
|
|
|
|
Sets this matrix as a translation transform:
|
|
<code>
|
|
1, 0, 0, x,
|
|
0, 1, 0, y,
|
|
0, 0, 1, z,
|
|
0, 0, 0, 1
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:this multiply]( [param:Matrix4 m] )</h3>
|
|
<p>Post-multiplies this matrix by [page:Matrix4 m].</p>
|
|
|
|
<h3>[method:this multiplyMatrices]( [param:Matrix4 a], [param:Matrix4 b] )</h3>
|
|
<p>Sets this matrix to [page:Matrix4 a] x [page:Matrix4 b].</p>
|
|
|
|
<h3>[method:this multiplyScalar]( [param:Float s] )</h3>
|
|
<p>Multiplies every component of the matrix by a scalar value [page:Float s].</p>
|
|
|
|
<h3>[method:this premultiply]( [param:Matrix4 m] )</h3>
|
|
<p>Pre-multiplies this matrix by [page:Matrix4 m].</p>
|
|
|
|
<h3>[method:this scale]( [param:Vector3 v] )</h3>
|
|
<p>Multiplies the columns of this matrix by vector [page:Vector3 v].</p>
|
|
|
|
<h3>[method:this set]( [param:Float n11], [param:Float n12], [param:Float n13], [param:Float n14], [param:Float n21], [param:Float n22], [param:Float n23], [param:Float n24], [param:Float n31], [param:Float n32], [param:Float n33], [param:Float n34], [param:Float n41], [param:Float n42], [param:Float n43], [param:Float n44] )</h3>
|
|
<p>
|
|
Set the [page:.elements elements] of this matrix to the supplied row-major values [page:Float n11],
|
|
[page:Float n12], ... [page:Float n44].
|
|
</p>
|
|
|
|
<h3>[method:this setFromMatrix3]( [param:Matrix3 m] )</h3>
|
|
<p>Set the upper 3x3 elements of this matrix to the values of the Matrix3 [page:Matrix3 m].</p>
|
|
|
|
<h3>[method:this setPosition]( [param:Vector3 v] )</h3>
|
|
<h3>[method:this setPosition]( [param:Float x], [param:Float y], [param:Float z] ) // optional API</h3>
|
|
<p>
|
|
Sets the position component for this matrix from vector [page:Vector3 v], without affecting the
|
|
rest of the matrix - i.e. if the matrix is currently:
|
|
<code>
|
|
a, b, c, d,
|
|
e, f, g, h,
|
|
i, j, k, l,
|
|
m, n, o, p
|
|
</code>
|
|
This becomes:
|
|
<code>
|
|
a, b, c, v.x,
|
|
e, f, g, v.y,
|
|
i, j, k, v.z,
|
|
m, n, o, p
|
|
</code>
|
|
</p>
|
|
|
|
<h3>[method:Array toArray]( [param:Array array], [param:Integer offset] )</h3>
|
|
<p>
|
|
[page:Array array] - (optional) array to store the resulting vector in.<br />
|
|
[page:Integer offset] - (optional) offset in the array at which to put the result.<br /><br />
|
|
|
|
Writes the elements of this matrix to an array in
|
|
[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order column-major] format.
|
|
</p>
|
|
|
|
<h3>[method:this transpose]()</h3>
|
|
<p>[link:https://en.wikipedia.org/wiki/Transpose Transposes] this matrix.</p>
|
|
|
|
<h2>Source</h2>
|
|
|
|
<p>
|
|
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
|
|
</p>
|
|
</body>
|
|
</html>
|
|
|