1. Orientation3D in Three.JS

2. Content Specifying orientations Interpolating orientations
Euler angles
Axis angle
Matrix4
Interpolating orientations
quaternion
Fall 2016

3. Base Code http://jsfiddle.net/game3js/teudshx5/
// axis-symmetric objects
function buildMissle() {
//… }
// general 3D objects
function buildPlane() {
//… }
Fall 2016

4. Object3D Related Properties/Methods
.position .rotation .quaternion .matrix .matrixAutoUpdate
.rotateOnAxis (axis,angle) .updateMatrix()
Reference:
Fall 2016

5. 3D Orientations Setting: use Euler angles Axis angle Rotation matrix
Interpolating: use
quaternion
Fall 2016

6. Euler Angles Setting plane orientation
rotY, rotZ; rotZ, rotY, or the same?
Order of commands? Rotation.order !
Fall 2016

7. Axis Angle
Good for axis-symmetric object (e.g., missile), specifying the direction vector
Object3D.rotateOnAxis ( axis, angle )
axis: normalized vector in object space. 
angle: in radians
Example:
New dir: (1,1,1).normalize()
Usually, direction vectors are in world space (careful to set up the correct object hierarchy)
This is better!
Fall 2016

8. Rotation Matrix Given local x: dir
(0,1,0)
Given local x: dir
Compute local Y by “Gram-Schmidt-ing” (0,1,0) with localX
Cross to get localZ
Specify orientation by setting the basis vectors
dir
Reference:
Fall 2016

9. Matrix4
Three.js describes the configuration of an object using a 4x4 matrix
When R & t are both given, it corresponds to “Rotate then Translate”
Fall 2016

10. Matrix4
Fall 2016

11.
Animation q x z
Fall 2016

12. Interpolation: lerp & slerp
SLERP: SphericaL intERPolation; LERP: Linear intERPolation
Interpolation: lerp & slerp
Quaternion:
setFromEuler
setFromRotationMatrix 
setFromUnitVectors ( vFrom, vTo ) 
Sets this quaternion to the rotation required to rotate direction vector vFrom to direction vector vTo.
[setFromAxisAngle]
[Next step: keyframe interpolation]
Fall 2016

13. q.setFromUnitVectors Missile: http://jsfiddle.net/game3js/xykp9ahL/
Fall 2016

14. q.setFromEuler
Fall 2016

15. q.setFromRotationMatrix
Fall 2016