three.js歐拉角和四元數(shù)的使用方法
前言
這篇郭先生就來說說歐拉角和四元數(shù)，歐拉角和四元數(shù)的優(yōu)缺點是老生常談的話題了，使用條件我就不多說了，我只說一下使用方法。
1. 歐拉角（Euler）
歐拉角描述一個旋轉(zhuǎn)變換，通過指定軸順序和其各個軸向上的指定旋轉(zhuǎn)角度來旋轉(zhuǎn)一個物體。下面我們開看看它的方法
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
返回一個與當(dāng)前參數(shù)相同的新歐拉角。
3. copy( euler: Euler ): this
將 euler 的屬性拷貝到當(dāng)前對象。
4. setFromRotationMatrix( m: Matrix4, order?: string ): Euler
m - Matrix4 矩陣上面的3x3部分是一個純旋轉(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è)置這個歐拉變換的角度。
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
通過這個歐拉角創(chuàng)建一個四元數(shù)，然后用這個四元數(shù)和新順序設(shè)置這個歐拉角。
8. equals( euler: Euler ): boolean
檢查 euler 是否與當(dāng)前對象相同。
9. fromArray( xyzo: any[] ): Euler
長度為3或4的一個 array 。array[3] 是一個可選的 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[]
返回一個數(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ù)對象Quaternion使用x、y、z和w四個分量表示。在三維空間中一個旋轉(zhuǎn)由一個旋轉(zhuǎn)軸、一個旋轉(zhuǎn)角度和旋轉(zhuǎn)方向來唯一確定。
假設(shè)我們默認為右手法則的旋轉(zhuǎn)，則旋轉(zhuǎn)方向為逆時針，旋轉(zhuǎn)軸向量為v = (vx, vy, vz), 角度為旋轉(zhuǎn)角度，那么該旋轉(zhuǎn)就應(yīng)該類似如下圖所示：
其對應(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ù)制到這個四元數(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是否歸一化對四元數(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
返回這個四元數(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ù)不會超出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時，rotateTowards方法返回就是當(dāng)前四元數(shù)。當(dāng)step為1時，rotateTowards方法返回就是參數(shù)q的四元數(shù)。當(dāng)step為0~1之間時，rotateTowards方法返回就是當(dāng)前四元數(shù)和參數(shù)q的四元數(shù)之間的插值。
10. inverse(): Quaternion
轉(zhuǎn)置此四元數(shù)-計算共軛。假設(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}
由此可知計算共軛之后，x、y和z分別取復(fù)制，而w值不變。
11. conjugate(): Quaternion
返回此四元數(shù)的旋轉(zhuǎn)共軛。四元數(shù)的共軛。表示旋轉(zhuǎn)軸在相反方向上的同一個旋轉(zhuǎn)。經(jīng)過我的測試這個方法和inverse()方法是一樣的，來看看inverse的源碼
inverse: function () {
// quaternion is assumed to have unit length
return this.conjugate();
},
12. dot( v: Quaternion ): number
計算四元數(shù)v和當(dāng)前四元數(shù)的點積。眾所周知點積得到的是一個數(shù)字。很簡單
13. lengthSq(): number
計算四元數(shù)的平方長度。就是各個值平方求和。
14 length(): number
計算此四元數(shù)的長度。也就是各個值平方求和，然后在開根號。
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ù)的各個參數(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和這個四元數(shù)的各個分量，以確定兩者是否代表同樣的旋轉(zhuǎn)。不多說。
20. slerp( qb: Quaternion, t: number ): Quaternion
處理四元數(shù)之間的球面線性插值。t 代表quaternionA（這里t為0）和quaternionB（這里t為1）這兩個四元數(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)然這個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)方法，無需動態(tài)設(shè)置。同樣使用了slerp方法。
slerp: function ( qa, qb, qm, t ) {
return qm.copy( qa ).slerp( qb, t );
}
關(guān)于歐拉角四元數(shù)要說的差不多就這些，還需要平時多多應(yīng)用才能記熟。
總結(jié)
到此這篇關(guān)于three.js歐拉角和四元數(shù)的使用方法的文章就介紹到這了,更多相關(guān)three.js歐拉角和四元數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
記得meta標(biāo)簽當(dāng)中有一個refresh的功能嗎？這是讓瀏覽的頁面刷新并可以轉(zhuǎn)到相應(yīng)的頁面，如果刷新本頁的話就會造成重復(fù)的刷新，現(xiàn)在我們就試試用腳本來實現(xiàn)只讓頁面刷新一次.2009-07-07
這篇文章主要介紹了小程序毫秒級倒計時，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
使用contextMenu插件實現(xiàn)Bootstrap table彈出右鍵菜單
如今Bootstrap這個前端框架已被許多人接受并應(yīng)用在不同的項目中，其中“開發(fā)高效，設(shè)備兼容”的特點表現(xiàn)得非常明顯。這篇文章主要介紹了使用contextMenu插件實現(xiàn)Bootstrap table彈出右鍵菜單,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了微信小程序的自定義組件的實現(xiàn)方法,把頁面重復(fù)的代碼部分封裝成為一個自定義組件,以便在不同的頁面中重復(fù)使用,有助于代碼的維護,感興趣的朋友跟隨小編一起看看吧2024-05-05
本文主要介紹了webpack中使用Eslint的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要為大家詳細介紹了js圖片輪播插件的封裝代碼，只需要獲取到圖片和按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
詳解JavaScript如何實現(xiàn)異步并發(fā)任務(wù)控制器
實現(xiàn)一個控制并發(fā)數(shù)的任務(wù)隊列?、實現(xiàn)一個異步并發(fā)任務(wù)控制器，這已經(jīng)是非常經(jīng)典的手寫題目了，因為其中涉及?異步?和?并發(fā)?的內(nèi)容，所以本文就來講講到底如何實現(xiàn)呢2023-05-05
深入理解JavaScript系列（15） 函數(shù)（Functions）
本章節(jié)我們要著重介紹的是一個非常常見的ECMAScript對象——函數(shù)（function),我們將詳細講解一下各種類型的函數(shù)是如何影響上下文的變量對象以及每個函數(shù)的作用域鏈都包含什么，以及回答諸如像下面這樣的問題：下面聲明的函數(shù)有什么區(qū)別么2012-04-04
這篇文章主要介紹了JS實現(xiàn)可調(diào)整倒計時間代碼，效果很酷炫，也很具有實用價值，感興趣的小伙伴們可以參考一下2015-08-08
Bootstrap每天必學(xué)之彈出框（Popover）插件
Bootstrap每天必學(xué)之彈出框（Popover）插件,彈出框的內(nèi)容完全可使用 Bootstrap 數(shù)據(jù) API（Bootstrap Data API）來填充，如何實現(xiàn)請參考本文2016-04-04