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 - 围绕某个轴旋转球体

回答

相关问题