Three.js歐拉對象Euler和四元數Quaternion

Three.js歐拉對象Euler和四元數Quaternion

歐拉對象和四元數主要用來表達對象的旋轉信息。

關鍵詞：歐拉Euler、四元數Quaternion、矩陣Matrix4

我的WebGL/Three.js技術博客

歐拉對象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()

對象的一個旋轉能夠用一個四元數表示，兩次連續旋轉能夠理解爲兩次旋轉對應的四元數對象進行乘法運算。

// 四元數q一、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;

  };

}(),