three.js中物體旋轉實踐之房門的打開與關閉

看這篇博客，默認你已經知道了3D模型實現三維空間內旋轉的實現方式（矩陣、歐拉角、四元數）。

ok，下面正式切入主題，房門的打開和關閉，先上圖：

正如你所看到的那樣，這個“房門”已經被打開了。

一、three.js中物體的旋轉

object.rotation.set(angleX,angleY,angleZ);

這是three.js為object3D類（基本上所有的物體都是繼承自這個類的）提供的自旋轉API；

為什么叫自旋轉呢，就像地球自轉和公轉一樣，自旋轉表示繞物體自身中心點（局部坐標系）旋轉；

所以如果使用上面的旋轉API進行門的旋轉的話，你將得到以下結果：

代碼如下：

object.rotation.set(0,-Math.PI/3,0);

沿Y軸旋轉30度，跟我們的期望有一點差距，我們希望沿着門的右邊那條線旋轉。

那么有哪些方法呢？

二、實現門沿着指定邊“旋轉”

這個旋轉打了一個雙引號，所以，他不僅僅是調用旋轉API那么簡單！

①自旋轉+平移

var rotationY = currentCube.rotation.y;
currentCube.rotation.set(0,rotationY - Math.PI/3,0);
currentCube.position.setX(currentCube.position.x + 0.4);
currentCube.position.setZ(currentCube.position.z - 0.75);

代碼很簡單，先沿着Y軸自旋轉30度，然后X、Z軸平移合適的距離來實現最終的效果；

其實這個合適的距離是可以通過旋轉角和門的寬度計算出來的，我這里為了大家看得直白一點，就直接用數據代替了。

②添加父容器，旋轉父容器

ok，原理就像上圖所示的那樣，我們“裝門”的時候，假如，門的尺寸是50X220，那么我們可以用一個100X440的盒子將這個門包起來；

然后這個門在左邊區域，如你所見的那樣，然后門要打開的時候，我們直接將110X440的盒子進行自旋轉就行了。

個人認為，這種方法比較繁瑣，故沒有進行代碼上的實現，如果你有興趣，不妨一試。

三、three.js中的自旋轉方法

同樣是Y軸自旋轉30度，three中的實現方式有如下幾種（都是自旋轉）：

①法一

object.rotation.set(0,Math.PI / 3,0);

②法二

var axis = new THREE.Vector3(0,1,0).normalize();
var angle = Math.PI / 3;
object.rotateOnAxis(axis,angle);

三維向量歸一化作為旋轉軸，加上角度，當然這個向量可以是以圓點為起點的任意向量，如果以（1,1,0）為旋轉軸的話，旋轉效果如下：

③法三

var quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ).normalize(), -Math.PI / 3 );
object.applyQuaternion( quaternion);

四元數旋轉的three實現，傳入歸一化的旋轉軸和旋轉角度來初始化旋轉四元數，然后作用於物體上，從而實現旋轉

④法四

function rotateAroundWorldAxis(object, axis, radians) {
        var rotWorldMatrix = new THREE.Matrix4();
        rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
        rotWorldMatrix.multiply(object.matrix);               
        object.matrix = rotWorldMatrix;
        object.rotation.setFromRotationMatrix(object.matrix);
}

這是一個旋轉函數，形參分別為物體對象、旋轉軸（3維向量）、角度

先根據傳入參數初始化一個旋轉矩陣；

右乘物體的視圖矩陣；

將添加了旋轉動作的新矩陣作用於物體對象上；

四、three.js中物體在世界坐標系下旋轉

敬請期待