Three.js - 圍繞某個軸旋轉球體

我遇到問題。在Three.js中，我想旋轉一個球體（地球）圍繞軸傾斜23.5度。我發現了sphere.rotation.x，sphere.rotation.y和sphere.rotation.z，但是當我以正確的比例組合它們時，球體的旋轉非常奇怪 - 它沒有永久旋轉軸。我想我需要一個像sphere.rotation.vector（1,0，-1）這樣的函數。有誰知道如何調用這個函數，以及正確的語法是如何？Three.js - 圍繞某個軸旋轉球體

非常感謝您的回答！

來源

2013-05-01 karlosss

您需要爲此使用quaternions。 This video解釋了四元數是什麼以及它們如何用於3D圖形。

您可以構建一個四元數是這樣的：

object.rotation.setEulerFromQuaternion(quaternion);

您也可以通過使用對象層次實現這一目標：

quaternion = new THREE.Quaternion().setFromAxisAngle(axisOfRotation, angleOfRotation);

然後，通過將其應用到你的對象。例如，您可以創建一個Object3D()實例並將其傾斜23.5度，然後創建一個球體（地球）並將其添加到傾斜的對象。球體將圍繞傾斜的Y軸旋轉。然而，四元數是解決這個問題的最佳工具。

來源

2013-05-01 16:14:31 Aki

非常感謝！它效果很好:) – karlosss 2013-05-01 21:41:17

由於threejs r59'setEulerFromQuaternion（）'被刪除（請參閱：https：//github.com/mrdoob/three.js/wiki/Migration#r58--r59）。第二行現在應該是：'object.rotation = new THREE.Euler（）。setFromQuaternion（quaternion）;' – kontur 2014-10-15 07:24:11

你不必瞭解歐拉角或四元數是如何工作去做你想要的。您可以使用

Object3D.rotateOnAxis(axis, angle);

確保axis是一個單位矢量（長度爲1），並且angle爲弧度。

Object3D.rotateOnAxis(axis, angle)在對象空間的軸上旋轉。

three.js所r.67

來源

2013-05-01 16:27:09 WestLangley

感謝您的幫助，但我是three.js的初學者，我無法使用Object3D ...我相信你，它運作良好，但我用四元數。 – karlosss 2013-05-01 21:43:23

@karlosss Object3D是Three.js中許多對象的基類。如果你的對象有一個旋轉屬性，那麼它可能是Object3D的一個子類。 – Joel 2013-09-27 02:32:11

軸的長度爲3. – 2013-10-15 12:09:45

var quaternion = new THREE.Quaternion(); 
var object = scene.getObjectByName('xxx'); 
function render(){ 
    quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0).normalize(), 0.005); 
    object.position.applyQuaternion(quaternion); 
}

three.js所的版本是86，看full example on codepen。

來源

2017-07-19 12:48:07 luics

你實例化一個'Quaternion'，'Vector3'和'Euler'每秒多少次？相反，在渲染循環之外創建一個四元數的實例。在渲染循環中，執行以下操作：'planet.position.applyQuaternion（quaternion）;'另外，在循環外調用scene.getObjectByName（）。 – WestLangley 2017-07-19 17:21:43

不錯的建議。使用上面的代碼來表達如何圍繞任何軸旋轉很簡單。我現在在[完整示例]（https://codepen.io/luics/pen/GEbOYO）中優化它。 – luics 2017-07-21 07:34:09

加油。你沒有按照我的建議。在渲染循環之外設置'quaternion'。刪除'euler'。改爲調用'applyQuaternion（）'。 – WestLangley 2017-07-21 15:02:53

Three.js - 圍繞某個軸旋轉球體

回答

相關問題