diff --git a/docs/list.js b/docs/list.js index 368e17b90a3a7aaa550c227029aafffcdfecbd84..feb505e931e8738d87d2968c55c5dc2971e1376c 100644 --- a/docs/list.js +++ b/docs/list.js @@ -2,7 +2,9 @@ var list = { "Manual": { "Introduction": [ - [ "Creating a scene", "manual/introduction/Creating-a-scene" ] + [ "Creating a scene", "manual/introduction/Creating-a-scene" ], + [ "Matrix transformations", "manual/introduction/Matrix-transformations" ] + ] }, diff --git a/docs/manual/introduction/Matrix-transformations.html b/docs/manual/introduction/Matrix-transformations.html new file mode 100644 index 0000000000000000000000000000000000000000..7abbc69e5d4e37537e63372875cca080c6919663 --- /dev/null +++ b/docs/manual/introduction/Matrix-transformations.html @@ -0,0 +1,64 @@ + + + + + + + + + +

[name]

+ +

+ Three.js uses *matrices* to encode 3D transformations---translations (position), rotations, and scaling. Every instance of [page:Object3D] has a [page:Object3D.matrix matrix] which stores that object's position, rotation, and scale. This page describes how to update an object's transformation. +

+ +

Convenience properties and *matrixAutoUpdate*

+ + There are two ways to update an object's transformation: +
    +
  1. + Modify the object's *position*, *quaternion*, and *scale* properties, then ask Three.js to recompute the object's matrix from these properties: + + object.position = start_position; + object.quaternion = quaternion; + object.updateMatrix(); + + Calling the *updateMatrix* method forces the object's matrix to be recomputed from *position*, *quaternion*, and *scale*. You can also set + + object.matrixAutoUpdate = true; + + in lieu of calling *updateMatrix*. This will force the matrix to be recomputed every frame; for static objects, you should therefore set + + object.matrixAutoUpdate = false; + +
    2. +
  2. + Modify the object's matrix directly. The [page:Matrix4] class has various methods for modifying the matrix: + + object.matrix.setRotationFromQuaternion(quaternion); + object.matrix.setPosition(start_position); + object.matrixAutoUpdate = false; + + Note that *matrixAutoUpdate* must be set to *false* in this case, and you should make sure not to call *updateMatrix*. Calling *updateMatrix* will clobber the manual changes made to the matrix, recalculating the matrix from *position*, *scale*, and so on. +
    3. +
+ +

Object and world matrices

+

+ An object's [page:Object3D.matrix matrix] stores the object's transformation relative to the object's [page:Object3D.parent parent]; to get the object's transformation in world coordinates, you must access the object's [page:Object3D.matrixWorld]. +

+

+ When either the parent or the child object's transformation changes, you can request that the child object's [page:Object3D.matrixWorld matrixWorld] be updated by calling [page:Object3D.updateMatrixWorld updateMatrixWorld](). +

+ +

Rotation and Quaternion

+

+ Three.js provides two ways of representing 3D rotations: [page:Euler Euler angles] and [page:Quaternion Quaternions], as well as methods for converting between the two. Euler angles are subject to a problem called "gimbal lock," where certain configurations can lose a degree of freedom (preventing the object from being rotated about one axis). For this reason, object rotations are always stored in the object's [page:Object3D.quaternion quaternion]. +

+

+ Previous versions of the library included a *useQuaternion* property which, when set to false, would cause the object's [page:Object3D.matrix matrix] to be calculated from an Euler angle. This practice is deprecated---instead, you should use the [page:Object3D.setRotationFromEuler setRotationFromEuler] method, which will update the quaternion. +

+ + + \ No newline at end of file