|
|
@@ -0,0 +1,64 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <script src="../../list.js"></script>
|
|
|
+ <script src="../../page.js"></script>
|
|
|
+ <link type="text/css" rel="stylesheet" href="../../page.css" />
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <h1>[name]</h1>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ 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.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h2>Convenience properties and *matrixAutoUpdate*</h2>
|
|
|
+
|
|
|
+ There are two ways to update an object's transformation:
|
|
|
+ <ol>
|
|
|
+ <li>
|
|
|
+ Modify the object's *position*, *quaternion*, and *scale* properties, then ask Three.js to recompute the object's matrix from these properties:
|
|
|
+ <code>
|
|
|
+ object.position = start_position;
|
|
|
+ object.quaternion = quaternion;
|
|
|
+ object.updateMatrix();
|
|
|
+ </code>
|
|
|
+ Calling the *updateMatrix* method forces the object's matrix to be recomputed from *position*, *quaternion*, and *scale*. You can also set
|
|
|
+ <code>
|
|
|
+ object.matrixAutoUpdate = true;
|
|
|
+ </code>
|
|
|
+ in lieu of calling *updateMatrix*. This will force the matrix to be recomputed every frame; for static objects, you should therefore set
|
|
|
+ <code>
|
|
|
+ object.matrixAutoUpdate = false;
|
|
|
+ </code>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ Modify the object's matrix directly. The [page:Matrix4] class has various methods for modifying the matrix:
|
|
|
+ <code>
|
|
|
+ object.matrix.setRotationFromQuaternion(quaternion);
|
|
|
+ object.matrix.setPosition(start_position);
|
|
|
+ object.matrixAutoUpdate = false;
|
|
|
+ </code>
|
|
|
+ Note that *matrixAutoUpdate* <emph>must</emph> be set to *false* in this case, and you should make sure <emph>not</emph> to call *updateMatrix*. Calling *updateMatrix* will clobber the manual changes made to the matrix, recalculating the matrix from *position*, *scale*, and so on.
|
|
|
+ </li>
|
|
|
+ </ol>
|
|
|
+
|
|
|
+ <h2>Object and world matrices</h2>
|
|
|
+ <p>
|
|
|
+ An object's [page:Object3D.matrix matrix] stores the object's transformation <emph>relative</emph> to the object's [page:Object3D.parent parent]; to get the object's transformation in <emph>world</emph> coordinates, you must access the object's [page:Object3D.matrixWorld].
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 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]().
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h2>Rotation and Quaternion</h2>
|
|
|
+ <p>
|
|
|
+ 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 <emph>always</emph> stored in the object's [page:Object3D.quaternion quaternion].
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 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.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ </body>
|
|
|
+</html>
|
Mr.doob