📗 Rotation is a rigid transformation (the other one is translation).
➭ Rotation preserves distances.
➭ Rotation preserves handedness.
📗 Rotation matrices are orthonormal matrices (same as in 2D).
➭ All rows and columns have unit length.
➭ All rows and columns are mutually orthogonal.
➭ Positive determinant (preserve handedness).
📗 Rotation matrices are invertible, and its inverse is its transpose.
📗 Center of rotation for a mesh is determined by its geometry.
📗 Use an empty THREE.Group and add the mesh to the group for rotation around a different center.
📗 Professor Gleicher's demo: Link.
📗 Find the center of rotation for the objects in the scene.
📗 Change the center of rotation to a different location, for example, a corner. Demo hierarchy
📗 Any rotation can be represented as a single rotation about some axis.
📗 Any rotation can be represented as a sequence of three rotations about a fixed axis.
➭ The 3 fixed axes can be in any order: XYZ, ZYX, ZXY.
➭ The 3 axes can repeat: ZXZ. (THREE.js does not support these.)
➭ The 3 axes can be local or global. (THREE.js assumes local.)
📗 In THREE.js, obj.rotation is an Euler angles object THREE.Euler(x, y, z, order = "XYZ"), where order can be one of "XYZ", "YZX", "ZXY", "XZY", "YXZ", "ZYX", not a THREE.Vector3 object: Doc.
📗 For XYZ rotations, when Y is 90 degrees, rotation around X and Z becomes the same rotation.
➭ The Y axis is stuck in the X = 0 plane.
➭ Lost a degree of freedom.
➭ This is called Gimbal lock: Wikipedia.
📗 Professor Gleicher's demos: Link.
📗 Interpolation between two rotations can also be difficult.
📗 Professor Gleicher's demos: Link.
📗 Composing two rotations with the same axis is equivalent to adding the rotation angles.
📗 Composing two rotations with different axes is difficult.
📗 Professor Gleicher's demos: Link.
📗 Quaternion is a 4D complex number \(a + b i + c j + d k\): .
📗 It is similar to 2D complex number but with more "imaginary" components. A complex number has form \(a + b i\), where \(i = \sqrt{-1}\), \(a\) is the real part and \(b\) is the imaginary part.
📗 Two quaternions can be multiplied like complex number multiplication, but with a larger multiplication table:
📗 A unit quaternion has norm (magnitude) 1.
📗 The unit quaternion for axis angle \(\left(\theta, v\right)\) is 4 components \(\cos\left(\dfrac{\theta}{2}\right)\) (1 component) and \(\sin\left(\dfrac{\theta}{2}\right) v\) (3 components since \(v\) is in 3D).
📗 Multiplication of two quaternions represent composition of two rotations: rotation by \(q_{1}\) then \(q_{1}\) in quarternion is equivalent to rotation by \(q_{1} q_{2}\) (quaternion multiplication, not usual vector multiplication).
📗 The rotation (orientation) of objects in THREE.js are stored in quaternions, not rotation matrices, as THREE.Quaternion(x, y, z, w): Doc.
📗 THREE.js stores position, quaternions, scale of objects separately, not in a single matrix.
📗 Quaternion has good properties:
➭ Easy to multiply (use formulas: preserves unit-ness and compose rotations).
➭ Easy to interpolate (not linear, but has formulas).
➭ Easy to store (4 numbers vs 9 numbers in the matrix).
📗 From Euler angles: make a quaternion for each axis \(\left(\cos\left(\dfrac{x}{2}\right), \sin\left(\dfrac{x}{2} \begin{bmatrix} 1 \\ 0 \\ 0 \end{bmatrix} \right)\right)\), \(\left(\cos\left(\dfrac{y}{2}\right), \sin\left(\dfrac{y}{2} \begin{bmatrix} 0 \\ 1 \\ 0 \end{bmatrix} \right)\right)\), \(\left(\cos\left(\dfrac{z}{2}\right), \sin\left(\dfrac{z}{2} \begin{bmatrix} 0 \\ 0 \\ 1 \end{bmatrix} \right)\right)\), and multiply them.
📗 From axis angle: \(\left(\theta, v\right) \to \left(\cos\left(\dfrac{\theta}{2}\right), \sin\left(\dfrac{\theta}{2}\right) v\right)\).
📗 The other direction is much harder (and not as useful since THREE.js stores all rotations as quaternions).
📗 Another way to set rotation in THREE.js is to use lookAt.
➭ obj.position is the object center.
➭ obj.up is a vector pointing to the up direction.
➭ obj.lookAt(...) is a function that computes the rotation (it directly computes the rotation matrix without computing the angles, and stores it as quaternion).
📗 Transformation in THREE.js can be done with states, transforms, and methods to set transformation.
State
Transform (Motion)
Method
obj.matrix
obj.applyMatrix4(...)
-
position
translateX(...) or Y, Z, onAxis
-
scale
-
-
rotation
rotateX(...) or Y, Z, onAxis
lookAt(...)
quaternion
applyQuaternion(...)
setRotationFromAxisAngle(...) or Euler, Matrix, Quaternion
📗 Note: in the newest version of THREE.js, the THREE.BufferGeoemtry can be scaled and rotated (it should only be done once at the beginning, THREE.Mesh should be scaled and rotated during an animation loop instead).
📗 Notes and code adapted from the course taught by Professor Michael Gleicher.
📗 Please use Ctrl+F5 or Shift+F5 or Shift+Command+R or Incognito mode or Private Browsing to refresh the cached JavaScript: Code.
📗 You can print the notes: .
📗 Anonymous feedback can be submitted to: Form.