Three.js歐拉對象Euler和四元數(shù)Quaternion
歐拉對象和四元數(shù)主要用來表達對象的旋轉(zhuǎn)信息。
關(guān)鍵詞：歐拉Euler舔稀、四元數(shù)Quaternion、矩陣Matrix4
歐拉對象Euler
構(gòu)造函數(shù)：Euler(x,y,z,order)
參數(shù)xyz分別表示繞xyz軸旋轉(zhuǎn)的角度值掌测，角度單位是弧度内贮。參數(shù)order表示旋轉(zhuǎn)順序,默認值XYZ，也可以設(shè)置為YXZ汞斧、YZX等值
// 創(chuàng)建一個歐拉對象夜郁，表示繞著xyz軸分別旋轉(zhuǎn)45度，0度断箫，90度
var Euler = new THREE.Euler( Math.PI/4,0, Math.PI/2);
設(shè)置歐拉對象的
var Euler = new THREE.Euler();
Euler.x = Math.PI/4;
Euler.y = Math.PI/2;
Euler.z = Math.PI/4;
四元數(shù)Quaternion
四元數(shù)對象Quaternion使用x拂酣、y、z和w四個分量表示仲义。
var quaternion = new THREE.Quaternion();
console.log('查看四元數(shù)結(jié)構(gòu)',quaternion);
console.log('查看四元數(shù)w分量',quaternion.w);
四元數(shù)方法.setFromAxisAngle()
四元數(shù)的方法.setFromAxisAngle(axis, angle)通過旋轉(zhuǎn)軸axis和旋轉(zhuǎn)角度angle設(shè)置四元數(shù)數(shù)據(jù)婶熬，也就是x、y埃撵、z和w四個分量赵颅。
繞單位向量Vector3(x,y,z)表示的軸旋轉(zhuǎn)θ度
k = sinθ/2
q=( xk , yk , z*k, cosθ/2)
var quaternion = new THREE.Quaternion();
// 旋轉(zhuǎn)軸new THREE.Vector3(0,1,0)
// 旋轉(zhuǎn)角度Math.PI/2
quaternion.setFromAxisAngle(new THREE.Vector3(0,1,0),Math.PI/2)
console.log('查看四元數(shù)結(jié)構(gòu)',quaternion);
四元數(shù)乘法.multiply()
對象的一個旋轉(zhuǎn)可以用一個四元數(shù)表示，兩次連續(xù)旋轉(zhuǎn)可以理解為兩次旋轉(zhuǎn)對應(yīng)的四元數(shù)對象進行乘法運算暂刘。
// 四元數(shù)q1饺谬、q2分別表示一個旋轉(zhuǎn)，兩個四元數(shù)進行乘法運算，相乘結(jié)果保存在q2中
// 在q1表示的旋轉(zhuǎn)基礎(chǔ)在進行q2表示的旋轉(zhuǎn)操作
q1.quaternion.multiply( q2 );
歐拉募寨、四元數(shù)和矩陣轉(zhuǎn)化
歐拉對象族展、四元數(shù)對象和旋轉(zhuǎn)矩陣可以相關(guān)轉(zhuǎn)化，都可以表示旋轉(zhuǎn)變換拔鹰。
Matrix4.makeRotationFromQuaternion(q)
通過矩陣對象Matrix4的.makeRotationFromQuaternion(q)方法可以把四元數(shù)轉(zhuǎn)化對應(yīng)的矩陣對象仪缸。
quaternion.setFromEuler(Euler)
通過歐拉對象設(shè)置四元數(shù)對象
Euler.setFromQuaternion(quaternion)
四元數(shù)轉(zhuǎn)化為歐拉對象
Object3D
Object3D對象角度屬性.rotation的值是歐拉對象Euler,四元數(shù)屬性.quaternion的值是四元數(shù)對象Quaternion。
執(zhí)行Object3D對象旋轉(zhuǎn)方法列肢，會同時改變對象的角度屬性和四元數(shù)屬性恰画。四元數(shù)屬性和位置.position、縮放屬性.scale一樣會轉(zhuǎn)化為對象的本地矩陣屬性.matrix,本地矩陣屬性值包含了旋轉(zhuǎn)矩陣瓷马、縮放矩陣拴还、平移矩陣。
Object3D對象角度屬性.rotation和四元數(shù)屬性.quaternion是相互關(guān)聯(lián)的一個改變會同時改變另一個欧聘。
// 一個網(wǎng)格模型對象片林，基類是Object3D
var mesh = new THREE.Mesh()
// 繞z軸旋轉(zhuǎn)
mesh.rotateZ(Math.PI)
console.log('查看角度屬性rotation',mesh.rotation);
console.log('查看四元數(shù)屬性quaternion',mesh.quaternion);
.rotateOnAxis(axis, angle)表示繞繞著任意方向某個軸axis旋轉(zhuǎn)一定角度angle，繞X树瞭、Y和Z軸旋轉(zhuǎn)對應(yīng)的方法分別是rotateX()拇厢、rotateY()和rotateZ(),繞著XYZ特定軸旋轉(zhuǎn)的方法是基于.rotateOnAxis()方法實現(xiàn)的爱谁。
// Object3D.js源碼
rotateOnAxis: function () {
var q1 = new Quaternion();
// 旋轉(zhuǎn)軸axis晒喷，旋轉(zhuǎn)角度angle
return function rotateOnAxis( axis, angle ) {
// 通過旋轉(zhuǎn)軸和旋轉(zhuǎn)角度設(shè)置四元數(shù)的xyzw分量
q1.setFromAxisAngle( axis, angle );
// Object3D對象的四元數(shù)屬性和四元數(shù)q1相乘
this.quaternion.multiply( q1 );
return this;
};
}(),
