javascript Three.js - 围绕某个轴旋转球体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16319742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Three.js - Rotating a sphere around a certain axis
提问by karlosss
I have a problem. In Three.js, I want to rotate a sphere (Earth) around axis tilted by 23.5 degs. I found sphere.rotation.x, sphere.rotation.y and sphere.rotation.z, but when I combine them in the correct ratio, the sphere's rotation is quite weird - it has no permanent rotation axis. I think I need a function like sphere.rotation.vector(1,0,-1). Does anyone know how this function is called and how the correct syntax is?
我有个问题。在 Three.js 中，我想围绕倾斜 23.5 度的轴旋转一个球体（地球）。我找到了 sphere.rotation.x、sphere.rotation.y 和 sphere.rotation.z，但是当我以正确的比例组合它们时，球体的旋转非常奇怪——它没有永久的旋转轴。我想我需要一个像 sphere.rotation.vector(1,0,-1) 这样的函数。有谁知道这个函数是如何调用的以及正确的语法是怎样的？
Many thanks for answers!
非常感谢您的回答！
回答by WestLangley
You do not have to understand how Euler angles or quaternions work to do what you want. You can use
您无需了解欧拉角或四元数如何工作即可完成您想要的操作。您可以使用
Object3D.rotateOnAxis( axis, angle );
Object3D.rotateOnWorldAxis( axis, angle );
Make sure axisis a unit vector (has length 1), and angleis in radians.
确保axis是一个单位向量（长度为 1），angle以弧度为单位。
Object3D.rotateOnAxis( axis, angle )rotates on an axis in object space.
Object3D.rotateOnAxis( axis, angle )在对象空间中的轴上旋转。
Object3D.rotateOnWorldAxis( axis, angle )rotates on an axis in world space.
Object3D.rotateOnWorldAxis( axis, angle )在世界空间中的轴上旋转。
three.js r.104
三.js r.104
回答by Aki
You need to use quaternionsfor this. This videoexplains what quaternions are and how they are used in 3D graphics.
为此，您需要使用四元数。该视频解释了四元数是什么以及它们如何在 3D 图形中使用。
You can construct a quaternion like this:
您可以像这样构造四元数：
quaternion = new THREE.Quaternion().setFromAxisAngle( axisOfRotation, angleOfRotation );
Then you apply it to your object by:
然后您通过以下方式将其应用于您的对象：
object.rotation.setEulerFromQuaternion( quaternion );
You can also achieve this by using object hierarchies. For example, you can make an Object3D()instance and tilt it by 23.5 degs, then create a sphere (Earth) and add it to the tilted object. The sphere will then rotate around the tilted Y axis. Quaternions however, are the best tool for solving this.
您还可以通过使用对象层次结构来实现这一点。例如，您可以创建一个Object3D()实例并将其倾斜 23.5 度，然后创建一个球体（地球）并将其添加到倾斜的对象中。然后球体将围绕倾斜的 Y 轴旋转。然而，四元数是解决这个问题的最佳工具。
回答by luics
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 version is 86, see full example on codepen.
三.js 版本是 86，请参阅codepen 上的完整示例。
回答by Alberto Piras
You can rotate your sphere using th 'ObjectControls' module for ThreeJS that allows you to rotate a single OBJECT (or a Group), and not the SCENE.
您可以使用 ThreeJS 的“ObjectControls”模块旋转球体，该模块允许您旋转单个 OBJECT（或组），而不是 SCENE。
Include the libary:
包括库：
then
然后
var controls = new THREE.ObjectControls(camera, renderer.domElement, yourMesh);
var controls = new THREE.ObjectControls(camera, renderer.domElement, yourMesh);
You can find here a live demo here: https://albertopiras.github.io/threeJS-object-controls/
你可以在这里找到现场演示：https: //albertopiras.github.io/threeJS-object-controls/
Here is the repo: https://github.com/albertopiras/threeJS-object-controls.
这是 repo：https: //github.com/albertopiras/threeJS-object-controls。
Hope this helps
希望这可以帮助
