📗 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.
📗 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:
📗 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).
📗 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).