Three. js source code annotation (7) Math/Euler. js, three. jseuler. js

Three. js source code annotation (7) Math/Euler. js, three. jseuler. js

Wuji (http://blog.csdn.net/omni360)

This article follows the "signature-non-commercial use-consistency" creation public agreement

Reprinted please keep this sentence: Wuji-this blog focuses on Agile development and mobile and IOT device research: data visualization, GOLANG, Html5, WEBGL, THREE. JS. Otherwise, the post from this blog will not be reprinted or reprinted. Thank you for your cooperation.

The following code is a comment on the Math/Quaternion. JS file in the THREE. js source code file.

More updates in: https://github.com/omni360/three.js.sourcecode/blob/master/Three.js

// File: src/math/Euler. js/*** @ author mrdoob/http://mrdoob.com/* @ author WestLangley/http://github.com/WestLangley * @ author bhouston/http://exocortex.com * // Euler object constructor. this is used to create an object of the Orla Liga. the functional functions of the Euler object are implemented by using a function prototype object constructed. //// usage: var euler = new Euler (5, 3, 2, 'xyz') // create an axis that rotates 5 degrees around the Y axis and a certain degree around the Y axis, rotate 2 degrees around an axis in the order of 'xyz '. with the order of rotation, you can determine the degree of rotation for each x, y, and Z axes. /// NOTE: the x, y, and z parameters indicate the rotation angles of the three axes. The order parameter is used to determine the degree of rotation of the specific axis./ // NOTE: The parameter (x, y, z, order) is optional. If you do not specify the parameter (x, y, z, order), a coordinate, 0, 'xyz') of the Eular object. // NOTE: the default order of the order parameter is 'xyz'. The value range is ['xyz', 'yzx', 'zxy', 'xzy ', 'yzz', 'zyx'] // in general, the orah is a common method used to describe the direction of an object in a three-dimensional space. for example, how many degrees does an object rotate around the X axis in three-dimensional space, // how many degrees does the Y axis rotate, and how many degrees does the Z Axis Rotate, to describe the direction of an object in a 3D space. /// it is similar to the Flying Tigers in the Hong Kong movie saying, "The Flying Eagles and the Flying Eagles are at the front of you. at five o'clock, find the target and prepare to gather the target. "/// * //// <summary> Euler </summary> // <param name =" x "type =" number "> rotate x degrees around an axis </p Aram> // <param name = "y" type = "number"> rotate y degrees around an axis </param> /// <param name = "z" type = "number"> rotate z degrees around an axis </param> // <param name = "order" type = "String"> order (rotation order) the default value range of 'xyz' is ['xyz', 'yzx', 'zxy', 'xzy ', 'yz', 'zyx'] </param> THREE. euler = function (x, y, z, order) {this. _ x = x | 0; this. _ y = y | 0; this. _ z = z | 0; this. _ order = order | THREE. euler. defaultOrder;}; THREE. euler. rotationOrders = ['xyz', 'Yzx', 'zxy', 'xzy ', 'yz', 'zyx']; // (rotation sequence) the default value range of 'xyz' is ['xyz', 'yzx', 'zxy', 'xzy ', 'yz', 'zyx'] THREE. euler. defaultOrder = 'xyz '; // The default rotation sequence is 'xyz '/***************************** * ************* the functions provided by the Euler object. **************************************** /THREE. euler. prototype = {constructor: THREE. euler, // constructor _ x: 0, _ y: 0, _ z: 0, _ order: THREE. euler. defaultOrder, // initializes (_ x, _ y, _ z, _ order) to x, y, and z as 0. The default rotation sequence is 'xyz'. // * // The get x method is used to obtain the euler's angle x value. /// NOTE: get x () is used by Euler. prototype. x (Euler. x), which can be used in browsers other than IE. * //// <summary> get x </summary> /// <returns type = "number"> returns the euler's _ x value </returns> get x () {return this. _ x; // returns the euler's angle _ x value}./* // The set x method is used to set the x value of the Euler's angle. returns the Euler's angle of the new value. /// NOTE: set x () is used by Euler. prototype. x = value (Euler. x = value), which can be used in browsers other than IE. * //// <summary> set x </summary> /// <param name = "Value" type = "number"> angle value that rotates around the x axis </param> set x (value) {this. _ x = value; // set the _ x value of the Euler's angle. this. onChangeCallback (); // call the callback function .}, /* // The get y method is used to obtain the euler's y value. /// NOTE: get y () is used by Euler. prototype. y (Euler. y), which can be used in browsers other than IE. * //// <summary> get y </summary> /// <returns type = "number"> returns the euler's corner _ y value </returns> get y () {return this. _ y; // returns the euler's angle _ y value}./* // set y is used to set the y value of the Euler's angle. returns the Euler's angle of the new value. /// NOTE: set y () is used in Eu Ler. prototype. y = value (Euler. y = value), which can be used in browsers other than IE. * //// <summary> set y </summary> /// <param name = "value" type = "number"> set y (value) {this. _ y = value; // set the _ y value of the Euler's angle. this. onChangeCallback (); // call the callback function .}, /* // The get z method is used to obtain the z value of the euler's angle. /// NOTE: get z () is used by Euler. prototype. z (Euler. z), which can be used in browsers other than IE. * //// <summary> get z </summary> /// <returns type = "number"> returns the euler's corner _ z value </returns> Get z () {return this. _ z; // returns the euler's angle _ z value},/* // The set z method is used to set the z value of the Euler's angle. returns the Euler's angle of the new value. /// NOTE: set z () is used by Euler. prototype. z = value (Euler. z = value), which can be used in browsers other than IE. * //// <summary> set z </summary> // <param name = "value" type = "number"> set z (value) {this. _ z = value; // set the _ z value of the Euler's angle. this. onChangeCallback (); // call the callback function .}, // * // The get order method is used to obtain the euler's order value. /// NOTE: the usage of get order () is Euler. p Rototype. order (Euler. order), which can be used in browsers other than IE. * //// <summary> get order </summary> /// <returns type = "number"> returns the euler's corner _ z value </returns> get order () {return this. _ order; // returns the euler's angular _ order value},/* // The set order method is used to set the order value of the Euler's angular. returns the Euler's angle of the new value. /// NOTE: set order () is used by Euler. prototype. order = value (Euler. order = value), which can be used in browsers other than IE. /// NOTE: The parameter (x, y, z, order) is optional. If the parameter (x, y, z, order) is not specified ), A coordinate (0, 0, 0, 'xyz. // NOTE: the default order of the order parameter is 'xyz'. The value range is ['xyz', 'yzx', 'zxy', 'xzy ', 'yz ', 'zyx'] * // <summary> set order </summary> /// <param name = "value" type = "number"> angle value for rotation around the Z axis </param> set order (value) {this. _ order = value; // set the _ order value of the Euler's angle. this. onChangeCallback (); // call the callback function .}, /// TODO: The setX () method is missing. /// TODO: The setY () method is missing. /// TODO: The setZ () method is missing. /// TODO: the setW () method is missing. /// TODO: The setComponent () method is missing. /// T ODO: The getComponent () method is missing. /* // set the value of x, y, z, and order of Euler's (ouarla. and returns the Euler (Euler's angle) of the new coordinate value ). /// TODO: Modify the set method. compatible with the x, y, z, and order parameters. The parameter omitted supports polymorphism. * //// <summary> set </summary> /// <param name = "x" type = "number"> rotate x degrees around an axis </param>/ // <param name = "y" type = "number"> rotate the y degree around an axis </param> // <param name = "z" type = "number"> rotate the z degree around an axis </param> // <param name = "order" type = "number"> order (rotation order) the default value range of 'xyz' is ['xyz', 'yzx', 'zxy', 'xzy ', 'yz ', 'Zyx'] </param> // <returns type = "Euler"> returns a new Euler </returns> set: function (x, y, z, order) {this. _ x = x; this. _ y = y; this. _ z = z; this. _ order = order | this. _ order; this. onChangeCallback (); // call the callback function. return this; // return the new Euler's (Euler's angle)}. // * // copy is used to copy the (x, y, z, order) value of Euler's (Euler's angle. and return the new Euler (Orla ). * //// <summary> copy </summary> /// <param name = "euler (OLA)" type = "Quaternion"> Euler (OLA) </param> /// <returns t Ype = "Euler's angle"> returns a new Euler's angle </returns> copy: function (euler's angle) {this. _ x = euler. _ x; this. _ y = euler. _ y; this. _ z = euler. _ z; this. _ order = euler. _ order; this. onChangeCallback (); // call the callback function. return this; // return the new Euler's (Euler's angle)},/* // setFromRotationMatrix uses a parameter m (rotation matrix) to achieve the purpose of Rotation Transformation. /// NOTE: m is a rotating matrix, more formula: http://en.wikipedia.org/wiki/Transformation_matrix////// sample: This sample is Z axis rotation 30 degrees. /------------------------------------ ---------------- \ | Cos (heading) = 0.866 | sin (heading) = 0.5 | 0 | ------------------------- | ------------------------ | matrix = |-sin (heading) =-0.5 | cos (heading) = 0.866 | 0 | ----------------------- | -------------------- | ----- | 0 | 0 | 1 | \ hour/angle = acos (m00 + m11 + m22-1)/2) angle = acos (0.866 + 0.866 + 1-1)/2) angle = acos (0.866) Angle = 30 degreesx = (m21-m12) = 0-0 = 0y = (m02-m20) = 0-0 = 0z = (m10-m01) =-0.5-0.5 =-1 * /// <summary> setFromRotationMatrix </summary> // <param name = "m" type = "Matrix3"> 3x3 matrix (rotation matrix) </param> // <param name = "order" type = "String"> the default order of order is 'xyz'. The value range is ['xyz ', 'yzx', 'zxy', 'xzy ', 'yz', 'zyx'] </param> // <returns type = "Euler's angle) "> return a new Euler (OLA) </returns> setFromRotationMatrix: func Tion (m, order) {var clamp = THREE. math. clamp; // clamp is used to set the value range of a value. // assumes the upper 3x3 of m is a pure rotation matrix (I. e, unscaled) // make sure that Parameter m is a 3x3 rotation matrix. var te = m. elements; var m11 = te [0], m12 = te [4], m13 = te [8]; var m21 = te [1], m22 = te [5], m23 = te [9]; var m31 = te [2], m32 = te [6], m33 = te [10]; order = order | this. _ order; if (order = 'xyz') {this. _ y = Math. asin (clam P (m13,-1, 1); if (Math. abs (m13) <0.99999) {this. _ x = Math. atan2 (-m23, m33); this. _ z = Math. atan2 (-m12, m11);} else {this. _ x = Math. atan2 (m32, m22); this. _ z = 0 ;}} else if (order = 'yz') {this. _ x = Math. asin (-clamp (m23,-1, 1); if (Math. abs (m23) <0.99999) {this. _ y = Math. atan2 (m13, m33); this. _ z = Math. atan2 (m21, m22);} else {this. _ y = Math. atan2 (-m31, m11); thi S. _ z = 0 ;}} else if (order = 'zxy') {this. _ x = Math. asin (clamp (m32,-1, 1); if (Math. abs (m32) <0.99999) {this. _ y = Math. atan2 (-m31, m33); this. _ z = Math. atan2 (-m12, m22);} else {this. _ y = 0; this. _ z = Math. atan2 (m21, m11) ;}} else if (order = 'zyx') {this. _ y = Math. asin (-clamp (m31,-1, 1); if (Math. abs (m31) <0.99999) {this. _ x = Math. atan2 (m32, m33); this. _ z = Mat H. atan2 (m21, m11);} else {this. _ x = 0; this. _ z = Math. atan2 (-m12, m22) ;}} else if (order = 'yzx') {this. _ z = Math. asin (clamp (m21,-1, 1); if (Math. abs (m21) <0.99999) {this. _ x = Math. atan2 (-m23, m22); this. _ y = Math. atan2 (-m31, m11);} else {this. _ x = 0; this. _ y = Math. atan2 (m13, m33) ;}} else if (order = 'xzy ') {this. _ z = Math. asin (-clamp (m12,-1, 1); if (Math. abs (M12) <0.99999) {this. _ x = Math. atan2 (m32, m22); this. _ y = Math. atan2 (m13, m11);} else {this. _ x = Math. atan2 (-m23, m33); this. _ y = 0 ;}} else {console. warn ('Three. euler :. setFromRotationMatrix () given unsupported order: '+ order) // an error is returned when an o object fails to be set according to the preceding rotation sequence.} this. _ order = order; // reset the rotation order this. onChangeCallback (); // call the callback function. return this; // return the new Euler's (Euler's angle)},/* // setFromQuaternion method, and set Euler's angle through the Quaternary element ). /// NOTE: The parameter (q) must be a unit vector. normalize () to obtain the unit vector. /// NOTE: The update parameter is an optional parameter. if this parameter is not set, the default value is true. * //// <summary> setFromQuaternion </summary> /// <param name = "q" type = "Quaternion"> Quaternary </param> /// <param name = "order" type = "String"> rotation sequence </param> // <param name = "update" type = "bool"> update indicates whether the callback function bool type is called. tag value </param> /// <returns type = "Euler (ouarla) "> return a new Euler (ouarla) </returns> setFromQuaternion: function (q, order, update) {var Clamp = THREE. math. clamp; // clamp is used to set the value range of a value. // q is assumed to be normalized // make sure that q is a unit vector. // the following URL provides a detailed description of converting a quaternary element to a Euler's angle.. there are many mathematical algorithms in it. // http://www.mathworks.com/matlabcentral/fileexchange/20696-function-to-convert-between-dcm-euler-angles-quaternions-and-euler-vectors/content/SpinCalc.mvar sqx = q. x * q. x; var sqy = q. y * q. y; var sqz = q. z * q. z; var sqw = q. w * q. w; order = order | this. _ order; if (order === 'Xyz') {this. _ x = Math. atan2 (2 * (q. x * q. w-q. y * q. z), (sqw-sqx-sqy + sqz); this. _ y = Math. asin (clamp (2 * (q. x * q. z + q. y * q. w),-1, 1); this. _ z = Math. atan2 (2 * (q. z * q. w-q. x * q. y), (sqw + sqx-sqy-sqz);} else if (order = 'yz') {this. _ x = Math. asin (clamp (2 * (q. x * q. w-q. y * q. z),-1, 1); this. _ y = Math. atan2 (2 * (q. x * q. z + q. y * q. w ),( Sqw-sqx-sqy + sqz); this. _ z = Math. atan2 (2 * (q. x * q. y + q. z * q. w), (sqw-sqx + sqy-sqz);} else if (order = 'zxy') {this. _ x = Math. asin (clamp (2 * (q. x * q. w + q. y * q. z),-1, 1); this. _ y = Math. atan2 (2 * (q. y * q. w-q. z * q. x), (sqw-sqx-sqy + sqz); this. _ z = Math. atan2 (2 * (q. z * q. w-q. x * q. y), (sqw-sqx + sqy-sqz);} else if (order = 'zyx ') {This. _ x = Math. atan2 (2 * (q. x * q. w + q. z * q. y), (sqw-sqx-sqy + sqz); this. _ y = Math. asin (clamp (2 * (q. y * q. w-q. x * q. z),-1, 1); this. _ z = Math. atan2 (2 * (q. x * q. y + q. z * q. w), (sqw + sqx-sqy-sqz);} else if (order = 'yzx') {this. _ x = Math. atan2 (2 * (q. x * q. w-q. z * q. y), (sqw-sqx + sqy-sqz); this. _ y = Math. atan2 (2 * (q. y * q. w-q. x * q. z ),( Sqw + sqx-sqy-sqz); this. _ z = Math. asin (clamp (2 * (q. x * q. y + q. z * q. w),-1, 1);} else if (order = 'xzy ') {this. _ x = Math. atan2 (2 * (q. x * q. w + q. y * q. z), (sqw-sqx + sqy-sqz); this. _ y = Math. atan2 (2 * (q. x * q. z + q. y * q. w), (sqw + sqx-sqy-sqz); this. _ z = Math. asin (clamp (2 * (q. z * q. w-q. x * q. y),-1, 1);} else {console. warn ('Three. euler :. set FromQuaternion () given unsupported order: '+ order) // an error is returned when an o object fails to be set according to the preceding rotation sequence.} this. _ order = order; // reset the rotation order if (update! = False) this. onChangeCallback (); // use the update parameter to determine whether to call the callback function. return this; // return the new Euler's (Euler's angle)}, and the/* // reorder method sets the rotation sequence of Euler's angle through the Quaternary element. /// NOTE: The parameter (q) must be a unit vector. normalize () to obtain the unit vector. /// WARNING: the reorder method will discard the rotation sequence information of Euler's (OLA. * //// <summary> reorder </summary> /// <param name = "order" type = "String"> rotation sequence </param> /// <returns type = "Euler (OLA) "> return a new Euler (orchea) </returns> reorder: function () {// WARNING: reorder method will discard Euler The rotation sequence of the (orah. // WARNING: this discards revolution information-bhoustonvar q = new THREE. quaternion (); return function (newOrder) {q. setfromeme( this); this. setFromQuaternion (q, newOrder); // call the setFromQuaternion () method, and return the Euler (Euler's angle) of the new rotation order )};}(), /* equals method // The equals method is equivalent to the comparison operator ===. compare the values of (x, y, z, and order) in the current Euler (euler's angle) and the parameter Euler, returns the bool type value. * //// <summary> equals </summary> /// <param name = "v" type = "Euler (ouarla)"> Euler (OLA) (x, y, z, order) </param> // <returns type = "bool"> returns true or false </returns> equals: function (euler) {return (euler. _ x = this. _ x) & (euler. _ y = this. _ y) & (euler. _ z = this. _ z) & (euler. _ order = this. _ order) ;},/* fromArray method // The fromArray method assigns an array of values stored in the Euler's (Euler's angle) (x, y, z, order) to the current Euler's (Euler's angle) object // NOTE: the order parameter is an optional parameter. if the default rotation sequence is not set. * //// <summary> fromArray </summary> /// <param name = "array" t Ype = "Array"> Euler (Euclidean angle) (x, y, z, order) value array Array [x, y, z, order] </param> // <returns type = "Euler's angle"> returns a new Euler's angle </returns> fromArray: function (array) {this. _ x = array [0]; this. _ y = array [1]; this. _ z = array [2]; if (array [3]! = Undefined) this. _ order = array [3]; this. onChangeCallback (); // call the callback function. return this; // return the new Euler's (Euler's angle)},/* toArray method // The toArray method assigns the attribute of the current Euler's (Euler's angle) object to the array [5, 3, 2, 'xyz']. returns an array object. * //// <summary> toArray </summary> // <returns type = "Array"> Euler (ouarla) (_ x, _ y, _ z, _ order) value array [x, y, z, order] </returns> toArray: function () {return [this. _ x, this. _ y, this. _ z, this. _ order]; // returns an array containing x, y, z, and order values ,}, /* onChange method // The onChange method transmits the callback function expression as the callback parameter to the onChangeCallback () method. * //// <summary> onChange </summary> // <param name = "callback" type = "function"> callback function </param> // <returns type = "Euler (OLA) "> Euler </returns> onChange: function (callback) {this. onChangeCallback = callback; return this ;},/* onChangeCallback method // The onChangeCallback method is used to clone an Euler's (ouarla) object. /// NOTE: The onChangeCallback () method is an empty function attribute. The onChangeCallback () method is called in most of the methods above. This is a convenient method. * //// <summary> onChangeCallback </summary> onChangeCallback: function () {},/* clone method // clone method to clone an Euler (ouarla) object. * //// <summary> clone </summary> /// <returns type = "Euler (OLA)"> returns the Euler (OLA) object </returns> clone: function () {return new THREE. euler (this. _ x, this. _ y, this. _ z, this. _ order );}};

Wuji (http://blog.csdn.net/omni360)

This article follows the "signature-non-commercial use-consistency" creation public agreement

Reprinted please keep this sentence: Wuji-this blog focuses on Agile development and mobile and IOT device research: data visualization, GOLANG, Html5, WEBGL, THREE. JS. Otherwise, the post from this blog will not be reprinted or reprinted. Thank you for your cooperation.

The following code is a comment on the Math/Quaternion. JS file in the THREE. js source code file.

More updates in: https://github.com/omni360/three.js.sourcecode/blob/master/Three.js