javascript
/
three.js
peilaus alkaen https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
							<!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] (&theta;) radians. The resulting matrix will be:
			<code>
	1 		0	 		0 			0 
	0 	cos(&theta;) -sin(&theta;) 	0 
	0 	sin(&theta;) cos(&theta;) 	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] (&theta;) radians. The resulting matrix will be:
			<code>
				cos(&theta;) 0 sin(&theta;) 0 0 1 0 0 -sin(&theta;) 0 cos(&theta;) 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] (&theta;) radians. The resulting matrix will be:
			<code>
cos(&theta;) -sin(&theta;) 0 0 
sin(&theta;) cos(&theta;)  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>