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