<!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: </p> <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]. <h2>A Note on Row-Major and Column-Major Ordering</h2> <p> The constructor and [page:set]() method take 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. </p> <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> <h2>Constructor</h2> <h3>[name]( [param:Number n11], [param:Number n12], [param:Number n13], [param:Number n14], [param:Number n21], [param:Number n22], [param:Number n23], [param:Number n24], [param:Number n31], [param:Number n32], [param:Number n33], [param:Number n34], [param:Number n41], [param:Number n42], [param:Number n43], [param:Number n44] )</h3> <p> Creates a 4x4 matrix with the given arguments in row-major order. If no arguments are provided, the constructor 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.html 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:Vector3 v] )</h3> <h3> [method:this makeTranslation]( [param:Float x], [param:Float y], [param:Float z] ) // optional API </h3> <p> Sets this matrix as a translation transform from vector [page:Vector3 v], or numbers [page:Float x], [page:Float y] and [page:Float z]: <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>