Prev: W6, Next: W8
Links: Zoom, TopHat (993679, or Form), Calculator:
Slide:

# Rotation

📗 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

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

# Rotate around a Corner [TopHat]

📗 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



# Euler's Theorem

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

# Euler Angles

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

# Axis Angle

📗 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

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

x \(1\) \(i\) \(j\) \(k\)
\(1\) \(1\) \(i\) \(j\) \(k\)
\(i\) \(i\) \(-1\) \(k\) \(-j\)
\(j\) \(j\) \(-k\) \(-1\) \(i\)
\(k\) \(k\) \(j\) \(-i\) \(-1\)


# Unit Quaternions

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



# THREE.js Quaternion

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

# Conversion to Quaternion

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

# LookAt and Up

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

# Look at a Moving Object [TopHat]

📗 Animate the objects so that green object rotates around the blue object and the red object looks at it.
Demo hierarchy



# THREE Transformation Summary

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

# Lecture Summary

📗 Rotation matrix.
📗 Euler angles.
📗 Axis angles.
📗 Unit quaternion.
📗 LookAt function.


📗 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 expand all the examples and demos: , or print the notes: .
📗 If there is an issue with TopHat during the lectures, please submit your answers on paper (include your Wisc ID and answers) or this Google Form at the end of the lecture.

Prev: W6, Next: W8





Last Updated: January 28, 2025 at 1:22 AM