Three.js歐拉對象Euler和四元數Quaternion
歐拉對象和四元數主要用來表達對象的旋轉信息。
關鍵詞：歐拉Euler、四元數Quaternion、矩陣Matrix4
歐拉對象Euler
構造函數：Euler(x,y,z,order)
參數xyz分別表示繞xyz軸旋轉的角度值，角度單位是弧度。參數order表示旋轉順序,默認值XYZ，也可以設置為YXZ、YZX等值
// 創建一個歐拉對象，表示繞著xyz軸分別旋轉45度，0度，90度
var Euler = new THREE.Euler( Math.PI/4,0, Math.PI/2);
設置歐拉對象的
var Euler = new THREE.Euler();
Euler.x = Math.PI/4;
Euler.y = Math.PI/2;
Euler.z = Math.PI/4;
四元數Quaternion
四元數對象Quaternion使用x、y、z和w四個分量表示。
var quaternion = new THREE.Quaternion();
console.log('查看四元數結構',quaternion);
console.log('查看四元數w分量',quaternion.w);
四元數方法.setFromAxisAngle()
四元數的方法.setFromAxisAngle(axis, angle)通過旋轉軸axis和旋轉角度angle設置四元數數據，也就是x、y、z和w四個分量。
繞單位向量Vector3(x,y,z)表示的軸旋轉θ度
k = sinθ/2
q=( xk , yk , z*k, cosθ/2)
var quaternion = new THREE.Quaternion();
// 旋轉軸new THREE.Vector3(0,1,0)
// 旋轉角度Math.PI/2
quaternion.setFromAxisAngle(new THREE.Vector3(0,1,0),Math.PI/2)
console.log('查看四元數結構',quaternion);
四元數乘法.multiply()
對象的一個旋轉可以用一個四元數表示，兩次連續旋轉可以理解為兩次旋轉對應的四元數對象進行乘法運算。
// 四元數q1、q2分別表示一個旋轉，兩個四元數進行乘法運算，相乘結果保存在q2中
// 在q1表示的旋轉基礎在進行q2表示的旋轉操作
q1.quaternion.multiply( q2 );
歐拉、四元數和矩陣轉化
歐拉對象、四元數對象和旋轉矩陣可以相關轉化，都可以表示旋轉變換。
Matrix4.makeRotationFromQuaternion(q)
通過矩陣對象Matrix4的.makeRotationFromQuaternion(q)方法可以把四元數轉化對應的矩陣對象。
quaternion.setFromEuler(Euler)
通過歐拉對象設置四元數對象
Euler.setFromQuaternion(quaternion)
四元數轉化為歐拉對象
Object3D
Object3D對象角度屬性.rotation的值是歐拉對象Euler,四元數屬性.quaternion的值是四元數對象Quaternion。
執行Object3D對象旋轉方法，會同時改變對象的角度屬性和四元數屬性。四元數屬性和位置.position、縮放屬性.scale一樣會轉化為對象的本地矩陣屬性.matrix,本地矩陣屬性值包含了旋轉矩陣、縮放矩陣、平移矩陣。
Object3D對象角度屬性.rotation和四元數屬性.quaternion是相互關聯的一個改變會同時改變另一個。
// 一個網格模型對象，基類是Object3D
var mesh = new THREE.Mesh()
// 繞z軸旋轉
mesh.rotateZ(Math.PI)
console.log('查看角度屬性rotation',mesh.rotation);
console.log('查看四元數屬性quaternion',mesh.quaternion);
.rotateOnAxis(axis, angle)表示繞繞著任意方向某個軸axis旋轉一定角度angle，繞X、Y和Z軸旋轉對應的方法分別是rotateX()、rotateY()和rotateZ(),繞著XYZ特定軸旋轉的方法是基于.rotateOnAxis()方法實現的。
// Object3D.js源碼
rotateOnAxis: function () {
var q1 = new Quaternion();
// 旋轉軸axis，旋轉角度angle
return function rotateOnAxis( axis, angle ) {
// 通過旋轉軸和旋轉角度設置四元數的xyzw分量
q1.setFromAxisAngle( axis, angle );
// Object3D對象的四元數屬性和四元數q1相乘
this.quaternion.multiply( q1 );
return this;
};
}(),
