Matrix4.html 15.2 KB
Newer Older
1 2 3
<!DOCTYPE html>
<html lang="en">
	<head>
4
		<meta charset="utf-8" />
M
Mr.doob 已提交
5
		<base href="../../../" />
M
Mr.doob 已提交
6 7 8
		<script src="list.js"></script>
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
9 10 11
	</head>
	<body>
		<h1>[name]</h1>
M
Mr.doob 已提交
12

13
		<p class="desc">
L
looeee 已提交
14 15 16 17 18 19 20 21 22
			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
L
Lewy Blue 已提交
23 24
			and so on, by being multiplied by the matrix. This is known as	<em>applying</em>
			the matrix to the vector.<br /><br />
L
looeee 已提交
25 26 27 28

			Every [page:Object3D] has three associated Matrix4s:
			<ul>
				<li>
29
					[page:Object3D.matrix]: This stores the local transform of the object. This is the object's transformation relative to its parent.
L
looeee 已提交
30 31
				</li>
				<li>
32
					[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].
L
looeee 已提交
33 34
				</li>
				<li>
J
Jost Schmithals 已提交
35 36
					[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.
L
looeee 已提交
37 38 39
				</li>
			</ul>

J
Jost Schmithals 已提交
40
			[page:Camera Cameras] have two additional Matrix4s:
L
looeee 已提交
41 42
			<ul>
				<li>
J
Jost Schmithals 已提交
43
					[page:Camera.matrixWorldInverse]: The view matrix - the inverse of the Camera's [page:Object3D.matrixWorld matrixWorld].
L
looeee 已提交
44 45
				</li>
				<li>
J
Jost Schmithals 已提交
46
					[page:Camera.projectionMatrix]: Represents the information how to project the scene to clip space.
L
looeee 已提交
47 48
				</li>
			</ul>
49
			Note: [page:Object3D.normalMatrix] is not a Matrix4, but a [page:Matrix3].
50
		</p>
M
Mr.doob 已提交
51

L
looeee 已提交
52
		<h2>A Note on Row-Major and Column-Major Ordering</h2>
53
		<p>
L
looeee 已提交
54
			The [page:set]() method takes arguments in [link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order row-major]
L
looeee 已提交
55
			order, while internally they are stored in the [page:.elements elements] array in column-major order.<br /><br />
M
Mr.doob 已提交
56

L
looeee 已提交
57 58
			This means that calling
		<code>
L
Lewy Blue 已提交
59 60
var m = new Matrix4();

L
looeee 已提交
61 62
m.set( 11, 12, 13, 14,
       21, 22, 23, 24,
L
Lewy Blue 已提交
63 64
       31, 32, 33, 34,
       41, 42, 43, 44 );
M
Mr.doob 已提交
65

66
		</code>
L
looeee 已提交
67
		will result in the [page:.elements elements] array containing:
L
looeee 已提交
68 69 70
		<code>
m.elements = [ 11, 21, 31, 41,
               12, 22, 32, 42,
L
Lewy Blue 已提交
71 72
               13, 23, 33, 43,
               14, 24, 34, 44 ];
L
looeee 已提交
73 74 75
		</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,
L
Lewy Blue 已提交
76
		the three.js documentation shows matrices in row-major order. Just bear in mind that if you are reading the source
L
Lewy Blue 已提交
77
		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.
78
		</p>
M
Mr.doob 已提交
79 80


81
		<h2>Constructor</h2>
M
Mr.doob 已提交
82

C
cjshannon 已提交
83

84
		<h3>[name]()</h3>
M
Mr.doob 已提交
85

86
		<p>
L
looeee 已提交
87 88
			Creates and initializes the [name] to the 4x4
			[link:https://en.wikipedia.org/wiki/Identity_matrix identity matrix].
89
	</p>
M
Mr.doob 已提交
90

91
		<h2>Properties</h2>
M
Mr.doob 已提交
92

93
		<h3>[property:Float32Array elements]</h3>
94
		<p>
L
looeee 已提交
95 96
		A [link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order column-major]
		 list of matrix values.
97
		</p>
M
Mr.doob 已提交
98

L
looeee 已提交
99
		<h3>[property:Boolean isMatrix4]</h3>
100
		<p>
L
looeee 已提交
101
			Used to check whether this or derived classes are Matrix4s. Default is *true*.<br /><br />
M
Mr.doob 已提交
102

L
looeee 已提交
103
			You should not change this, as it used internally for optimisation.
104
		</p>
105

L
looeee 已提交
106 107 108 109 110



		<h2>Methods</h2>

111
		<h3>[method:Array applyToBufferAttribute]( [param:BufferAttribute attribute] )</h3>
112
		<p>
113
		[page:BufferAttribute attribute] - An attribute of floats that represent 3D vectors.<br /><br />
L
looeee 已提交
114

115
		Multiplies (applies) this matrix to every 3D vector in the [page:BufferAttribute attribute].
116
		</p>
117

T
tschw 已提交
118

L
looeee 已提交
119
		<h3>[method:Matrix4 clone]()</h3>
120
		<p>Creates a new Matrix4 with identical [page:.elements elements] to this one.</p>
L
looeee 已提交
121

122
		<h3>[method:this compose]( [param:Vector3 position], [param:Quaternion quaternion], [param:Vector3 scale] )</h3>
123
		<p>
L
looeee 已提交
124 125 126 127 128
		Sets this matrix to the transformation composed of [page:Vector3 position],
		[page:Quaternion quaternion] and [page:Vector3 scale]. Internally this calls
		[page:.makeRotationFromQuaternion makeRotationFromQuaternion]( [page:Quaternion quaternion] )
		followed by [page:.scale scale]( [page:Vector3 scale] ), then finally
		[page:.setPosition setPosition]( [page:Vector3 position] ).
129
		</p>
130

131
		<h3>[method:this copy]( [param:Matrix4 m] )</h3>
132
		<p>Copies the [page:.elements elements] of matrix [page:Matrix4 m] into this matrix.</p>
L
looeee 已提交
133

134
		<h3>[method:this copyPosition]( [param:Matrix4 m] )</h3>
135
		<p>
L
looeee 已提交
136 137
		Copies the translation component of the supplied matrix [page:Matrix4 m] into this
		matrix's translation component.
138
		</p>
139

140
		<h3>[method:null decompose]( [param:Vector3 position], [param:Quaternion quaternion], [param:Vector3 scale] )</h3>
141
		<p>
L
looeee 已提交
142 143
		Decomposes this matrix into it's [page:Vector3 position], [page:Quaternion quaternion] and
		[page:Vector3 scale] components.
144
		</p>
145

L
looeee 已提交
146
		<h3>[method:Float determinant]()</h3>
147
		<p>
L
looeee 已提交
148 149 150
		Computes and returns the
		[link:https://en.wikipedia.org/wiki/Determinant determinant] of this matrix.<br /><br />

L
Lewy Blue 已提交
151
		Based on the method outlined [link:http://www.euclideanspace.com/maths/algebra/matrix/functions/inverse/fourD/index.htm here].
152
		</p>
153

154
		<h3>[method:Boolean equals]( [param:Matrix4 m] )</h3>
155
		<p>Return true if this matrix and [page:Matrix4 m] are equal.</p>
L
looeee 已提交
156

157
		<h3>[method:this extractBasis]( [param:Vector3 xAxis], [param:Vector3 yAxis], [param:Vector3 zAxis] )</h3>
158
		<p>
L
looeee 已提交
159
		Extracts the [link:https://en.wikipedia.org/wiki/Basis_(linear_algebra) basis] of this
L
looeee 已提交
160 161 162 163 164 165 166 167 168 169
		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)
170
yAxis = (b, f, j)
L
looeee 已提交
171 172
zAxis = (c, g, k)
		</code>
173
		</p>
174

175
		<h3>[method:this extractRotation]( [param:Matrix4 m] )</h3>
176
		<p>
L
looeee 已提交
177 178
		Extracts the rotation component of the supplied matrix [page:Matrix4 m] into this matrix's
		rotation component.
179
		</p>
180

181
		<h3>[method:this fromArray]( [param:Array array], [param:Integer offset] )</h3>
182
		<p>
L
looeee 已提交
183 184 185 186 187
		[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.
188
		</p>
189

190
		<h3>[method:this getInverse]( [param:Matrix4 m], [param:Boolean throwOnDegenerate] )</h3>
191
		<p>
L
looeee 已提交
192 193 194 195 196 197
		[page:Matrix4 m] - the matrix to take the inverse of.<br />
		[page:Boolean throwOnDegenerate] - (optional) If true, throw an error if the matrix is degenerate (not invertible).<br /><br />

		Set this matrix to the [link:https://en.wikipedia.org/wiki/Invertible_matrix inverse] of the passed matrix [page:Matrix4 m],
		using the method outlined [link:http://www.euclideanspace.com/maths/algebra/matrix/functions/inverse/fourD/index.htm here].

L
Lewy Blue 已提交
198
		If [page:Boolean throwOnDegenerate] is not set and the matrix is not invertible, set this to the 4x4 identity matrix.
199
		</p>
200

L
looeee 已提交
201

L
looeee 已提交
202
		<h3>[method:Float getMaxScaleOnAxis]()</h3>
203
		<p>Gets the maximum scale value of the 3 axes.</p>
204

205
		<h3>[method:this identity]()</h3>
206
		<p>Resets this matrix to the [link:https://en.wikipedia.org/wiki/Identity_matrix identity matrix].</p>
207

208
		<h3>[method:this lookAt]( [param:Vector3 eye], [param:Vector3 center], [param:Vector3 up], )</h3>
209
		<p>
L
looeee 已提交
210 211
			Constructs a rotation matrix, looking from [page:Vector3 eye] towards [page:Vector3 center]
			oriented by the [page:Vector3 up] vector.
212
		</p>
213

214
		<h3>[method:this makeRotationAxis]( [param:Vector3 axis], [param:Float theta] )</h3>
215
		<p>
L
looeee 已提交
216 217 218 219 220 221
		[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].
L
Lewy Blue 已提交
222
		See the discussion [link:http://www.gamedev.net/reference/articles/article1199.asp here].
223
		</p>
224

225
		<h3>[method:this makeBasis]( [param:Vector3 xAxis], [param:Vector3 yAxis], [param:Vector3 zAxis] )</h3>
226
		<p>
L
looeee 已提交
227 228 229 230 231 232 233 234
		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>
235
		</p>
L
looeee 已提交
236

237
		<h3>[method:this makePerspective]( [param:Float left], [param:Float right], [param:Float top], [param:Float bottom], [param:Float near], [param:Float far] )</h3>
238
		<p>
239
			Creates a [link:https://en.wikipedia.org/wiki/3D_projection#Perspective_projection perspective projection] matrix.
L
looeee 已提交
240
			This is used internally by [page:PerspectiveCamera.updateProjectionMatrix]()
241
		</p>
242

243
		<h3>[method:this makeOrthographic]( [param:Float left], [param:Float right], [param:Float top], [param:Float bottom], [param:Float near], [param:Float far] )</h3>
244
		<p>
L
looeee 已提交
245 246
		Creates an [link:https://en.wikipedia.org/wiki/Orthographic_projection orthographic projection] matrix.
		This is used internally by [page:OrthographicCamera.updateProjectionMatrix]().
247
		</p>
248

249
		<h3>[method:this makeRotationFromEuler]( [param:Euler euler] )</h3>
250
		<p>
L
looeee 已提交
251 252 253
		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.
254
		</p>
255

256
		<h3>[method:this makeRotationFromQuaternion]( [param:Quaternion q] )</h3>
257
		<p>
L
looeee 已提交
258 259 260 261
		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>
C
Calvin Huang 已提交
262
1-2y²-2z²    2xy-2zw    2xz+2yw    0
L
looeee 已提交
263 264 265 266
2xy+2zw      1-2x²-2z²  2yz-2xw    0
2xz-2yw      2yz+2xw    1-2x²-2y²  0
0            0          0          1
		</code>
267
		</p>
268

269
		<h3>[method:this makeRotationX]( [param:Float theta] )</h3>
270
		<p>
L
looeee 已提交
271 272 273 274 275 276 277 278 279 280
		[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>
281
		</p>
282

283
		<h3>[method:this makeRotationY]( [param:Float theta] )</h3>
284
		<p>
L
looeee 已提交
285 286 287 288 289 290 291 292 293 294
		[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>
295
		</p>
296

297
		<h3>[method:this makeRotationZ]( [param:Float theta] )</h3>
298
		<p>
L
looeee 已提交
299 300 301 302 303 304 305 306 307 308
		[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>
309
		</p>
M
Mr.doob 已提交
310

311
		<h3>[method:this makeScale]( [param:Float x], [param:Float y], [param:Float z] )</h3>
312
		<p>
L
looeee 已提交
313 314 315 316 317 318 319 320 321 322 323
			[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>
324
		</p>
L
looeee 已提交
325

326
		<h3>[method:this makeShear]( [param:Float x], [param:Float y], [param:Float z] )</h3>
327
		<p>
L
looeee 已提交
328 329 330 331 332 333 334 335 336 337 338
		[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>
339
		</p>
M
Mr.doob 已提交
340

341
		<h3>[method:this makeTranslation]( [param:Float x], [param:Float y], [param:Float z] )</h3>
342
		<p>
L
looeee 已提交
343 344 345 346 347 348 349 350 351 352 353
			[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>
354
		</p>
355

356
		<h3>[method:this multiply]( [param:Matrix4 m] )</h3>
357
		<p>Post-multiplies this matrix by [page:Matrix4 m].</p>
358

359
		<h3>[method:this multiplyMatrices]( [param:Matrix4 a], [param:Matrix4 b] )</h3>
360
		<p>Sets this matrix to [page:Matrix4 a] x [page:Matrix4 b].</p>
361

362
		<h3>[method:this multiplyScalar]( [param:Float s] )</h3>
363
		<p>Multiplies every component of the matrix by a scalar value [page:Float s].</p>
L
looeee 已提交
364

365
		<h3>[method:this premultiply]( [param:Matrix4 m] )</h3>
366
		<p>Pre-multiplies this matrix by [page:Matrix4 m].</p>
L
looeee 已提交
367

368
		<h3>[method:this scale]( [param:Vector3 v] )</h3>
369
		<p>Multiplies the columns of this matrix by vector [page:Vector3 v].</p>
C
cjshannon 已提交
370

371
		<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>
372
		<p>
L
looeee 已提交
373 374
			Set the [page:.elements elements] of this matrix to the supplied row-major values [page:Float n11],
			[page:Float n12], ... [page:Float n44].
375
		</p>
C
cjshannon 已提交
376

377
		<h3>[method:this setPosition]( [param:Vector3 v] )</h3>
378
		<p>
L
looeee 已提交
379 380 381 382 383 384 385 386 387 388 389 390 391 392 393
			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>
394
		</p>
T
tschw 已提交
395

396
		<h3>[method:Array toArray]( [param:Array array], [param:Integer offset] )</h3>
397
		<p>
L
looeee 已提交
398 399 400 401 402
		[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.
403
		</p>
T
tschw 已提交
404

405
		<h3>[method:this transpose]()</h3>
406
		<p>[link:https://en.wikipedia.org/wiki/Transpose Transposes] this matrix.</p>
L
looeee 已提交
407

408 409 410 411 412
		<h2>Source</h2>

		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
	</body>
</html>