Three.js - 围绕某个轴旋转球体

Posted

技术标签:

【中文标题】Three.js - 围绕某个轴旋转球体【英文标题】:Three.js - Rotating a sphere around a certain axis 【发布时间】:2013-04-25 13:04:52 【问题描述】:

我有问题。在 Three.js 中,我想围绕倾斜 23.5 度的轴旋转一个球体(地球)。我找到了 sphere.rotation.x、sphere.rotation.y 和 sphere.rotation.z,但是当我以正确的比例组合它们时,球体的旋转非常奇怪——它没有永久的旋转轴。我想我需要一个像 sphere.rotation.vector(1,0,-1) 这样的函数。有谁知道这个函数是怎么调用的,正确的语法是怎样的?

非常感谢您的回答!

【问题讨论】:

【参考方案1】:

您无需了解欧拉角或四元数如何工作即可完成您想要的工作。你可以使用

Object3D.rotateOnAxis( axis, angle );
Object3D.rotateOnWorldAxis( axis, angle );

确保axis 是单位向量(长度为1),angle 以弧度为单位。

Object3D.rotateOnAxis( axis, angle ) 在对象空间的轴上旋转。

Object3D.rotateOnWorldAxis( axis, angle ) 在世界空间中绕轴旋转。

three.js r.104

【讨论】:

谢谢你的帮助,但是我是three.js的初学者,我还不能使用Object3D...我相信你它很好用,但是我使用了四元数。跨度> @karlosss Object3D 是 Three.js 中许多对象的基类。如果您的对象具有旋转属性,那么它可能是 Object3D 的子类。 @RamyAlZuhouri 它是一个归一化向量,所以每个轴的长度为 one。虽然 3D 矢量确实有三个轴 ;) 知道如何在本地对象上进行这项工作吗?目前它围绕世界轴而不是对象轴旋转。谢谢【参考方案2】:

您可以使用 ThreeJS 的“ObjectControls”模块旋转球体,该模块允许您旋转单个对象(或组),而不是场景。

包含库:

然后

var controls = new THREE.ObjectControls(camera, renderer.domElement, yourMesh);

您可以在这里找到现场演示:https://albertopiras.github.io/threeJS-object-controls/

这里是回购:https://github.com/albertopiras/threeJS-object-controls。

希望对你有帮助

【讨论】:

【参考方案3】:
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。

【讨论】:

每秒多少次实例化QuaternionVector3Euler?而是在渲染循环之外创建一个四元数实例。在渲染循环中,执行以下操作:planet.position.applyQuaternion( quaternion ); 此外,在循环外调用 scene.getObjectByName()。 不错的建议。使用上面的代码很容易表达如何绕任何轴旋转。我现在在full example 优化它。 来吧。你没有听从我的建议。在渲染循环之外设置quaternion。删除euler。请致电applyQuaternion()【参考方案4】:

您需要为此使用quaternions。 This video 解释了四元数是什么以及它们如何在 3D 图形中使用。

你可以像这样构造一个四元数:

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

然后你将它应用到你的对象上:

object.rotation.setEulerFromQuaternion( quaternion );

您也可以通过使用对象层次结构来实现这一点。例如,您可以创建一个Object3D() 实例并将其倾斜 23.5 度,然后创建一个球体(地球)并将其添加到倾斜的对象中。然后球体将围绕倾斜的 Y 轴旋转。然而,四元数是解决这个问题的最佳工具。

【讨论】:

因为threejs r59 setEulerFromQuaternion() 已被删除(参见:github.com/mrdoob/three.js/wiki/Migration#r58--r59)。第二行现在应该是:object.rotation = new THREE.Euler().setFromQuaternion( quaternion );

以上是关于Three.js - 围绕某个轴旋转球体的主要内容,如果未能解决你的问题,请参考以下文章

three.js:结合 tween.js 围绕世界轴旋转对象

如何围绕轴旋转 Three.js Vector3?

three.js 在它的中心围绕 Y 轴旋转 Object3d

Three.js 飞机的 3D 旋转

如何在three.js中围绕对象的中心旋转?

Three.js - 将自定义几何移动到原点