什么是正确的方法来旋转一个对象围绕一个点three.js?

Question

大多数关于three.js的教程/问题建议使用three.js围绕一个点旋转一个对象的方法是在你想要旋转的位置创建一个父对象，附加你的对象，然后移动孩子。然后，当父旋转时，子旋转点。例如；

//Make a pivot
var pivot = new THREE.Object3D();
//Make an object
var object = new THREE.Mesh( new THREE.BoxGeometry(2,2,2), new THREE.MeshBasicMaterial() );
//Add object to pivot
pivot.add(object);

//Move object away from pivot
object.position.set(new THREE.Vector3(5,0,0));

//rotate the object 90 degrees around pivot
pivot.rotation.y = Math.PI / 2;

这是可行的，但它的限制是难以置信的——如果你想围绕一个不同的点旋转一个对象，你不能，因为一个对象不能有两个父对象。

下一个有效的方法是将旋转矩阵应用于对象的位置，例如。；

//Make an object
var object = new THREE.Mesh( new THREE.BoxGeometry(2,2,2), new THREE.MeshBasicMaterial() );
//Move the object
object.position.set(new THREE.Vector3(5,0,0);

//Create a matrix
var matrix = new THREE.Matrix4();
//Rotate the matrix
matrix.makeRotationY(Math.PI / 2);

//rotate the object using the matrix
object.position.applyMatrix4(matrix);

同样，这是有效的，但是似乎没有办法设置旋转点。它总是世界的起源。

另一个选项是sceneUtils中用于将子对象与父对象分离的实用方法，以及用于附加新父对象的另一个方法，但相关文档警告不要使用它，并且从未在任何示例代码中使用过。

最终，我希望能够使立方体沿着S形路径移动，但如果没有这个（看似）基本的东西，我会发现这相当困难。

我想围绕一系列不同的点旋转一个three.js物体。什么是解决这个问题的好方法？

Answer 1

这是可行的，但它的限制是难以置信的——如果你想围绕一个不同的点旋转一个对象，你不能，因为一个对象不能有两个父对象。

这是真的，但我想知道你对双亲的默认行为有什么期待。你可以把东西嵌套起来——比如，一个女人在车里拿着一个摄像头，它有两层育儿功能：摄像头-

如果要在父对象之间进行更改，始终可以拆离对象，然后将其附着到另一个对象。它警告您不要手动分离，因为对象将从位于本地空间的对象转到其父对象的世界空间/其新父对象的本地空间。

幸运的是，场景中有些东西的用意正是如此：即连接和分离。因此，当您想要传递一个对象而不从本地坐标到世界坐标并将其传送到奇怪的地方时，您可以使用附加/分离功能。

Answer 2

简单的解决方案：移动到锚定点，旋转，然后向后移动。

让我们假设您想旋转一个摄像机围绕一个anchorPoint（摄像机是THREE. Camera的一个实例，而anchorPoint是THREE. Vector3的一个实例）：

/// step 1: calculate move direction and move distance:
let moveDir = new THREE.Vector3(
    anchorPoint.x - camera.position.x,
    anchorPoint.y - camera.position.y,
    anchorPoint.z - camera.position.z
);
moveDir.normalize();
let moveDist = camera.position.distanceTo(anchorPoint);
/// step 2: move camera to anchor point
camera.translateOnAxis(moveDir, moveDist);
/// step 3: rotate camera
camera.rotateX(valX);
camera.rotateY(valY);
camera.rotateZ(valZ);
/// step4: move camera along the opposite direction
moveDir.multiplyScalar(-1);
camera.translateOnAxis(moveDir, moveDist);

Answer 3

这个答案可能会有所帮助：三个JS支点

有几种方法可以解决这个问题。正如您所提到的，您可以在父系方法中交换轴心点，但要将对象位置转换为不同的坐标系或从不同的坐标系转换对象位置，这需要大量的工作。

相反，您可以始终这样看待它（伪代码）：

>

1.1. 从对象的原始位置减去轴心点

应用你的旋转

将对象按相同的位置向量向后移动

1.1.将枢轴点添加到对象的新位置

注意：所有内容都在世界坐标中，因此您可能需要进行适当的转换。