本篇簡單介紹three.js中矩陣變換及兩種旋轉(zhuǎn)表達(dá)方式。

矩陣變換

three.js使用矩陣來保存Object3D的變換信息疆导。

矩陣變換的基礎(chǔ)

平移變換

image

比例變換

image

旋轉(zhuǎn)變換

(x,y,z,1) 繞x軸旋轉(zhuǎn)

image

(x,y,z,1) 繞y軸旋轉(zhuǎn)

image

(x,y,z,1) 繞z軸旋轉(zhuǎn)

image

three.js中的矩陣

<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding, margin, color, opacity; overflow: auto; font-family: "Courier New"; font-size: 12px; overflow-wrap: break-word;"> var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1),new THREE.MeshBasicMaterial());
cube.position.set(1,2,3);
cube.scale.set(7,8,9);
scene.add(cube);</pre>

image

我們可以看到正如上面的公式 cube的平移（1,2,3）所以elements[12]呻征、elements[13]谆级、elements[14]依次為1,2,3

cube的縮放為（7,8,9）所以elements[0]、elements[5]扯罐、elements[10]依次為7,8,9

然后我們選擇一下cube的x軸

<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding, margin, color, opacity; overflow: auto; font-family: "Courier New"; font-size: 12px; overflow-wrap: break-word;">var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1),new THREE.MeshBasicMaterial());
cube.rotation.x = Math.PI/3;//60°（2πr=C（圓周長）=>π =0.5C（半弧長）/r =>π弧度=180° =>π/3=60°） scene.add(cube);</pre>

image

三維旋轉(zhuǎn)表達(dá)方式

three.js提供了兩種三維旋轉(zhuǎn)表達(dá)方式：歐拉角(euler)和四元數(shù)(quaternion)负拟。它們相比較使用矩陣的方式進行變換更加的節(jié)省存儲空間和更方便的進行插值。
但是歐拉角(euler)存在萬向鎖問題歹河，配置可能失去一定的自由度所以都是使用在四元數(shù)(quaternion)齿椅。

歐拉角

歐拉角需要指定x,y,z三個軸的角度和旋轉(zhuǎn)的順序。

<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding, margin, color, opacity; overflow: auto; font-family: "Courier New"; font-size: 12px; overflow-wrap: break-word;">Euler( x, y, z, order )</pre>

萬向鎖問題：當(dāng)三個萬向節(jié)其中兩個的軸發(fā)生重合時启泣，會失去一個自由度的情形。

image

正常狀態(tài)：三個獨立的旋轉(zhuǎn)軸

image

萬向鎖：一旦選擇±90°作為pitch角示辈，就會導(dǎo)致第一次旋轉(zhuǎn)和第三次旋轉(zhuǎn)等價寥茫，整個旋轉(zhuǎn)表示系統(tǒng)被限制在只能繞豎直軸旋轉(zhuǎn)，丟失了一個表示維度矾麻。

四元數(shù)

四元數(shù)的出現(xiàn)就可以解決歐拉角的萬向鎖問題和萬向鎖帶來的插值不是線性的問題纱耻。

具體的四元數(shù)在旋轉(zhuǎn)的使用的原理可以參照：

維基百科—四元數(shù)與空間旋轉(zhuǎn)

<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding, margin, color, opacity; overflow: auto; font-family: "Courier New"; font-size: 12px; overflow-wrap: break-word;">Quaternion( x, y, z, w )</pre>

參照：[https://www.cnblogs.com/chenjy1225/p/9640580.html](https://www.cnblogs.com/chenjy1225/p/9640580.html)

原文轉(zhuǎn)自：https://www.cnblogs.com/vickylinj/p/13406239.html