Orientation3D in Three.JS

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

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

Object3D Related Properties/Methods .position .rotation .quaternion .matrix .matrixAutoUpdate .rotateOnAxis (axis,angle) .updateMatrix() Reference: https://threejs.org/docs/manual/introduction/Matrix-transformations.html Fall 2016

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

Euler Angles Setting plane orientation rotY, rotZ; rotZ, rotY, or the same? Order of commands? Rotation.order ! http://jsfiddle.net/game3js/Lwe996ka/ Fall 2016

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) http://jsfiddle.net/game3js/4q54yrgy/ This is better! Fall 2016

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: https://threejs.org/docs/manual/introduction/Matrix-transformations.html Fall 2016

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

Matrix4 http://jsfiddle.net/game3js/oj41z87y/ Fall 2016

http://jsfiddle.net/game3js/sq5d7tv7/ Animation q x z Fall 2016

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

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

q.setFromEuler http://jsfiddle.net/game3js/s4ncd03m/ Fall 2016

q.setFromRotationMatrix http://jsfiddle.net/game3js/73vw9c2a/ Fall 2016