Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface Matrix4

A class representing a 4x4 matrix. The most common use of a 4x4 matrix in 3D computer graphics is as a Transformation Matrix.a For an introduction to transformation matrices as used in WebGL, check out this tutorial. This allows a 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. Every Object3D has three associated Matrix4s: Object3D.matrix: This stores the local transform of the object. This is the object's transformation relative to its parent. 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 matrix. 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.

Cameras have three additional Matrix4s: Camera.matrixWorldInverse: The view matrix - the inverse of the Camera's matrixWorld. Camera.projectionMatrix: Represents the information how to project the scene to clip space. Camera.projectionMatrixInverse: The inverse of projectionMatrix. Note: Object3D.normalMatrix is not a Matrix4, but a Matrix3.

A Note on Row-Major and Column-Major Ordering The set() method takes arguments in row-major order, while internally they are stored in the .elements array in column-major order. This means that calling const m = new THREE.Matrix4(); m.set( 11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44 ); will result in the .elements array containing: m.elements = [ 11, 21, 31, 41, 12, 22, 32, 42, 13, 23, 33, 43, 14, 24, 34, 44 ]; 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,g 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 transpose of any matrices outlined here to make sense of the calculations.

Extracting position, rotation and scale There are several options available for extracting position, rotation and scale from a Matrix4. Vector3.setFromMatrixPosition: can be used to extract the translation component. Vector3.setFromMatrixScale: can be used to extract the scale component. Quaternion.setFromRotationMatrix, Euler.setFromRotationMatrix or .extractRotation can be used to extract the rotation component from a pure (unscaled) matrix. .decompose can be used to extract position, rotation and scale all at once. See the ngx3js docs page for details.

Examples

css3d / molecules physics / ammo / instancing webgl / custom / attributes / points2 webgl / clipping / advanced webgl / geometry / minecraft

Hierarchy

Index

Constructors

constructor

Properties

elements

elements: number[]

A column-major list of matrix values.

default

[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

Methods

clone

compose

copy

copyPosition

decompose

determinant

  • determinant(): number

equals

extractBasis

extractRotation

fromArray

  • fromArray(array: ArrayLike<number> | number[], offset?: number): I3JS.Matrix4

getMaxScaleOnAxis

  • getMaxScaleOnAxis(): number

identity

invert

lookAt

makeBasis

makeOrthographic

  • makeOrthographic(left: number, right: number, top: number, bottom: number, near: number, far: number): I3JS.Matrix4

makePerspective

  • makePerspective(left: number, right: number, bottom: number, top: number, near: number, far: number): I3JS.Matrix4
  • makePerspective(fov: number, aspect: number, near: number, far: number): I3JS.Matrix4

makeRotationAxis

makeRotationFromEuler

makeRotationFromQuaternion

  • Sets the rotation component of this matrix to the rotation specified by q, as outlined here. The rest of the matrix is set to the identity. So, given q = w + xi + yj + zk, the resulting matrix will be:

    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

    Parameters

    Returns I3JS.Matrix4

makeRotationX

makeRotationY

makeRotationZ

makeScale

  • makeScale(x: number, y: number, z: number): I3JS.Matrix4
  • Parameters

    • x: number

      The amount to scale in the X axis.

    • y: number

      The amount to scale in the Y axis.

    • z: number

      The amount to scale in the Z axis. Sets this matrix as scale transform: x, 0, 0, 0, 0, y, 0, 0, 0, 0, z, 0, 0, 0, 0, 1

    Returns I3JS.Matrix4

makeShear

  • makeShear(xy: number, xz: number, yx: number, yz: number, zx: number, zy: number): I3JS.Matrix4
  • Sets this matrix as a shear transform: 1, yx, zx, 0, xy, 1, zy, 0, xz, yz, 1, 0, 0, 0, 0, 1

    Parameters

    • xy: number

      The amount to shear X by Y.

    • xz: number

      The amount to shear X by Z.

    • yx: number

      The amount to shear Y by X.

    • yz: number

      The amount to shear Y by Z.

    • zx: number

      The amount to shear Z by X.

    • zy: number

      The amount to shear Z by Y.

    Returns I3JS.Matrix4

makeTranslation

  • makeTranslation(x: number, y: number, z: number): I3JS.Matrix4
  • Sets this matrix as a translation transform: 1, 0, 0, x, 0, 1, 0, y, 0, 0, 1, z, 0, 0, 0, 1

    Parameters

    • x: number

      The amount to translate in the X axis.

    • y: number

      The amount to translate in the Y axis.

    • z: number

      The amount to translate in the Z axis.

    Returns I3JS.Matrix4

multiply

multiplyMatrices

multiplyScalar

premultiply

scale

set

  • set(n11: number, n12: number, n13: number, n14: number, n21: number, n22: number, n23: number, n24: number, n31: number, n32: number, n33: number, n34: number, n41: number, n42: number, n43: number, n44: number): I3JS.Matrix4
  • Set the .elements of this matrix to the supplied row-major values n11, n12, ... n44.

    Parameters

    • n11: number
    • n12: number
    • n13: number
    • n14: number
    • n21: number
    • n22: number
    • n23: number
    • n24: number
    • n31: number
    • n32: number
    • n33: number
    • n34: number
    • n41: number
    • n42: number
    • n43: number
    • n44: number

    Returns I3JS.Matrix4

setFromMatrix3

setPosition

  • Sets the position component for this matrix from vector v, without affecting the rest of the matrix - i.e. if the matrix is currently: a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p This becomes: a, b, c, v.x, e, f, g, v.y, i, j, k, v.z, m, n, o, p

    Parameters

    • v: number | I3JS.Vector3
    • Optional y: number
    • Optional z: number

    Returns I3JS.Matrix4

toArray

  • toArray(array?: number[], offset?: number): number[]
  • Parameters

    • Optional array: number[]

      array to store the resulting vector in.

    • Optional offset: number

      offset in the array at which to put the result. Writes the elements of this matrix to an array in column-major format.

    Returns number[]

transpose

Generated using TypeDoc