123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412 |
- <!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 <em>applying</em>
- 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 two 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>
- </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:null 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 center], [param:Vector3 up], )</h3>
- <p>
- Constructs a rotation matrix, looking from [page:Vector3 eye] towards [page:Vector3 center]
- 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: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 x], [param:Float y], [param:Float z] )</h3>
- <p>
- [page:Float x] - the amount to shear in the X axis.<br />
- [page:Float y] - the amount to shear in the Y axis.<br />
- [page:Float z] - the amount to shear in the Z axis.<br /><br />
- Sets this matrix as a shear transform:
- <code>
- 1, y, z, 0,
- x, 1, z, 0,
- x, y, 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>
|