這篇說說歐拉角和四元數(shù)，歐拉角和四元數(shù)的優(yōu)缺點(diǎn)是老生常談的話題了，使用條件我就不多說了，我只說一下使用方法。

1. 歐拉角（Euler）
歐拉角描述一個(gè)旋轉(zhuǎn)變換，通過指定軸順序和其各個(gè)軸向上的指定旋轉(zhuǎn)角度來旋轉(zhuǎn)一個(gè)物體。下面我們開看看它的方法

1. set( x: number, y: number, z: number, order?: string ): Euler
x - 用弧度表示x軸旋轉(zhuǎn)量。y - 用弧度表示y軸旋轉(zhuǎn)量。z - 用弧度表示z軸旋轉(zhuǎn)量。order - (optional) 表示旋轉(zhuǎn)順序的字符串。設(shè)置該歐拉變換的角度和旋轉(zhuǎn)順序 order。

2. clone(): this
返回一個(gè)與當(dāng)前參數(shù)相同的新歐拉角。

3. copy( euler: Euler ): this
將 euler 的屬性拷貝到當(dāng)前對(duì)象。

4. setFromRotationMatrix( m: Matrix4, order?: string ): Euler
m - Matrix4 矩陣上面的3x3部分是一個(gè)純旋轉(zhuǎn)矩陣rotation matrix （也就是不發(fā)生縮放）order - (可選參數(shù)) 表示旋轉(zhuǎn)順序的字符串。使用基于 order 順序的純旋轉(zhuǎn)矩陣來設(shè)置當(dāng)前歐拉角。

var vector = new THREE.Vector3(0,0,1);var matrix = new THREE.Matrix4().makeRotationAxis(vector, Math.PI/6)var euler = new THREE.Euler().setFromRotationMatrix(matrix); // 返回Euler {_x: -0, _y: 0, _z: 0.5235987755982987, _order: "XYZ"}
5. setFromQuaternion( q: Quaternion, order?: string ): Euler
根據(jù) order 指定的方向，使用歸一化四元數(shù)設(shè)置這個(gè)歐拉變換的角度。

var vector = new THREE.Vector3(0,0,1);var quaternion = new THREE.Quaternion().setFromAxisAngle(vector, Math.PI/6)var euler = new THREE.Euler().setFromQuaternion(quaternion);// 返回Euler {_x: -0, _y: 0, _z: 0.5235987755982987, _order: "XYZ"}結(jié)果同上
6. setFromVector3( v: Vector3, order?: string ): Euler
設(shè)置 x, y and z 并且選擇性更新 order。

var vector = new THREE.Vector3(0,0,Math.PI/6);var euler = new THREE.Euler().setFromVector3(vector);/ 返回Euler {_x: -0, _y: 0, _z: 0.5235987755982987, _order: "XYZ"}結(jié)果同上
7. reorder( newOrder: string ): Euler
通過這個(gè)歐拉角創(chuàng)建一個(gè)四元數(shù)，然后用這個(gè)四元數(shù)和新順序設(shè)置這個(gè)歐拉角。

8. equals( euler: Euler ): boolean
檢查 euler 是否與當(dāng)前對(duì)象相同。

9. fromArray( xyzo: any[] ): Euler
長度為3或4的一個(gè) array 。array[3] 是一個(gè)可選的 order 參數(shù)。將歐拉角的x分量設(shè)置為 array[0]。將歐拉角的x分量設(shè)置為 array[1]。將歐拉角的x分量設(shè)置為 array[2]。將array[3]設(shè)置給歐拉角的 order ?？蛇x。

10. toArray( array?: number[], offset?: number ): number[]
返回一個(gè)數(shù)組：[x, y, z, order ]。

11. toVector3( optionalResult?: Vector3 ): Vector3
以 Vector3 的形式返回歐拉角的 x, y 和 z。

var vector = new THREE.Vector3(0,0,Math.PI/6);var euler = new THREE.Euler().setFromVector3(vector);euler.toVector3(); //返回Vector3 {x: 0, y: 0, z: 0.5235987755982988}
2. 四元數(shù)
四元數(shù)對(duì)象Quaternion使用x、y、z和w四個(gè)分量表示。在三維空間中一個(gè)旋轉(zhuǎn)由一個(gè)旋轉(zhuǎn)軸、一個(gè)旋轉(zhuǎn)角度和旋轉(zhuǎn)方向來唯一確定。

假設(shè)我們默認(rèn)為右手法則的旋轉(zhuǎn)，則旋轉(zhuǎn)方向?yàn)槟鏁r(shí)針，旋轉(zhuǎn)軸向量為v = (vx, vy, vz), 角度為旋轉(zhuǎn)角度，那么該旋轉(zhuǎn)就應(yīng)該類似如下圖所示：


其對(duì)應(yīng)的四元數(shù)就是：


1. set( x: number, y: number, z: number, w: number ): Quaternion
設(shè)置該四元數(shù)的值。

2. clone(): this
克隆此四元數(shù)。

3. copy( q: Quaternion ): this
將q的值復(fù)制到這個(gè)四元數(shù)。

4. setFromEuler( euler: Euler ): Quaternion
用歐拉角指定的旋轉(zhuǎn)來設(shè)置此四元數(shù)。

var euler = new THREE.Euler(0,0,Math.PI/6);var quaternion = new THREE.Quaternion().setFromEuler(euler) //返回Quaternion {_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}
5. setFromAxisAngle( axis: Vector3, angle: number ): Quaternion
使用由軸和角度指定的旋轉(zhuǎn)來設(shè)置此四元數(shù)。axis 應(yīng)該是歸一化的，angle 的單位是弧度。

var vector1 = new THREE.Vector3(0,0,1);var vector2 = new THREE.Vector3(0,0,2);var quaternion1 = new THREE.Quaternion().setFromAxisAngle(vector1, Math.PI/6); //返回Quaternion {_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}var quaternion2 = new THREE.Quaternion().setFromAxisAngle(vector2, Math.PI/6); //返回Quaternion {_x: 0, _y: 0, _z: 0.5176380902050415, _w: 0.9659258262890683}
可見axis是否歸一化對(duì)四元數(shù)的x、y和z值的影響是線性的。

6. setFromRotationMatrix( m: Matrix4 ): Quaternion
從m的旋轉(zhuǎn)分量來設(shè)置該四元數(shù)。使用很簡單就不多說了。

7. setFromUnitVectors( vFrom: Vector3, vTo: Vector3 ): Quaternion
通過從向量vFrom到vTo所需的旋轉(zhuǎn)來設(shè)置這四元數(shù)。vFrom 和 vTo 應(yīng)該是歸一化的。我們來看一下

var vector1 = new THREE.Vector3(1,1,0);var vector2 = new THREE.Vector3(0,1,0);var quaternion = new THREE.Quaternion().setFromUnitVectors(vector1, vector2); //相當(dāng)于繞z軸旋轉(zhuǎn)了Math.PI/4
8. angleTo( q: Quaternion ): number
返回這個(gè)四元數(shù)到q的角度

var quaternion1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/3));var quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/6));quaternion1.angleTo(quaternion2); // 返回0.5235987755982987
9. rotateTowards( q: Quaternion, step: number ): Quaternion
將此四元數(shù)按給定的step旋轉(zhuǎn)到定義的四元數(shù)q。該方法確保最終四元數(shù)不會(huì)超出q。那么是什么意思呢？

var quaternion1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/3)); //{_x: 0, _y: 0, _z: 0.49999999999999994, _w: 0.8660254037844387}var quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/6)); //{_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}quaternion1.rotateTowards( quaternion2, 0); //{_x: 0, _y: 0, _z: 0.49999999999999994, _w: 0.8660254037844387}quaternion1.rotateTowards( quaternion2, 0.5); //{_x: 0, _y: 0, _z: 0.2701980971440553, _w: 0.9628047508709812}quaternion1.rotateTowards( quaternion2, 1); //{_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}
可以看出其內(nèi)部使用了quaternion.slerp()方法。當(dāng)step為0時(shí)，rotateTowards方法返回就是當(dāng)前四元數(shù)。當(dāng)step為1時(shí)，rotateTowards方法返回就是參數(shù)q的四元數(shù)。當(dāng)step為0~1之間時(shí)，rotateTowards方法返回就是當(dāng)前四元數(shù)和參數(shù)q的四元數(shù)之間的插值。

10. inverse(): Quaternion
轉(zhuǎn)置此四元數(shù)-計(jì)算共軛。假設(shè)四元數(shù)具有單位長度。

var quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI/6,Math.PI/6,Math.PI/6)); //初始四元數(shù)Quaternion {_x: 0.30618621784789724, _y: 0.17677669529663687, _z: 0.30618621784789724, _w: 0.8838834764831845}quaternion.inverse(); //返回Quaternion {_x: -0.30618621784789724, _y: -0.17677669529663687, _z: -0.30618621784789724, _w: 0.8838834764831845}
由此可知計(jì)算共軛之后，x、y和z分別取復(fù)制，而w值不變。

11. conjugate(): Quaternion
返回此四元數(shù)的旋轉(zhuǎn)共軛。四元數(shù)的共軛。表示旋轉(zhuǎn)軸在相反方向上的同一個(gè)旋轉(zhuǎn)。經(jīng)過我的測(cè)試這個(gè)方法和inverse()方法是一樣的，來看看inverse的源碼

inverse: function () {        // quaternion is assumed to have unit length        return this.conjugate();},
12. dot( v: Quaternion ): number
計(jì)算四元數(shù)v和當(dāng)前四元數(shù)的點(diǎn)積。眾所周知點(diǎn)積得到的是一個(gè)數(shù)字。很簡單

13. lengthSq(): number
計(jì)算四元數(shù)的平方長度。就是各個(gè)值平方求和。

14 length(): number
計(jì)算此四元數(shù)的長度。也就是各個(gè)值平方求和，然后在開根號(hào)。

15. normalize(): Quaternion
歸一化該四元數(shù)。開看下源碼

normalize: function () {        var l = this.length();        if ( l === 0 ) { //如果四元數(shù)參length為0，那么this._x、this._y和this._z都設(shè)置為0，this._w設(shè)置為1            this._x = 0;            this._y = 0;            this._z = 0;            this._w = 1;        } else { //如果四元數(shù)參length為l,那么四元數(shù)的各個(gè)參數(shù)乘以l的倒數(shù)。            l = 1 / l;            this._x = this._x * l;            this._y = this._y * l;            this._z = this._z * l;            this._w = this._w * l;        }        return this;    },
16. multiply( q: Quaternion ): Quaternion
把該四元數(shù)和q相乘。具體怎么相乘。稍后再說。

17. premultiply( q: Quaternion ): Quaternion;
使用q左乘以(pre-multiply)該四元數(shù)。同樣稍后再說。

18. multiplyQuaternions( a: Quaternion, b: Quaternion ): Quaternion
四元數(shù)a乘以四元數(shù)b，我們說一下四元數(shù)的乘法。

multiplyQuaternions: function ( a, b ) {        var qax = a._x, qay = a._y, qaz = a._z, qaw = a._w;        var qbx = b._x, qby = b._y, qbz = b._z, qbw = b._w;        this._x = qax * qbw + qaw * qbx + qay * qbz - qaz * qby;        this._y = qay * qbw + qaw * qby + qaz * qbx - qax * qbz;        this._z = qaz * qbw + qaw * qbz + qax * qby - qay * qbx;        this._w = qaw * qbw - qax * qbx - qay * qby - qaz * qbz;        return this;},
19. equals( v: Quaternion ): boolean;
比較v和這個(gè)四元數(shù)的各個(gè)分量，以確定兩者是否代表同樣的旋轉(zhuǎn)。不多說。

20. slerp( qb: Quaternion, t: number ): Quaternion
處理四元數(shù)之間的球面線性插值。t 代表quaternionA（這里t為0）和quaternionB（這里t為1）這兩個(gè)四元數(shù)之間的旋轉(zhuǎn)量。quaternion 被設(shè)置為結(jié)果。rotateTowards的底層同樣使用了slerp方法。

var quaternion1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/6));var quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/2));quaternion1; //quaternion1的值為{_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}quaternion2; //quaternion2的值為{_x: 0, _y: 0, _z: 0.7071067811865475, _w: 0.7071067811865476}quaternion1.slerp(quaternion2, 0) //返回的結(jié)果和quaternion1相同quaternion1.slerp(quaternion2, 1) //返回的結(jié)果和quaternion2相同quaternion1.slerp(quaternion2, 其他值) //返回quaternion1到quaternion2的插值，當(dāng)然這個(gè)t也是可以大于1的//看一下rotateTowards的部分源碼rotateTowards: function ( q, step ) {    var angle = this.angleTo( q );    if ( angle === 0 ) return this;    var t = Math.min( 1, step / angle );    this.slerp( q, t );    return this;}
21. static slerp: functistatic slerp(qa: Quaternion, qb: Quaternion, qm: Quaternion, t: number): Quaternionon
這是slerp的靜態(tài)方法，無需動(dòng)態(tài)設(shè)置。同樣使用了slerp方法。

slerp: function ( qa, qb, qm, t ) {    return qm.copy( qa ).slerp( qb, t );}
關(guān)于歐拉角四元數(shù)要說的差不多就這些，還需要平時(shí)多多應(yīng)用才能記熟。