在 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 形路径移动，但如果没有这个（看似）基本的东西，我会发现它相当困难。

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

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个答案可能有帮助： Three JS Pivot point

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

相反，你总是可以这样看（伪代码）：

1. 将对象移动到枢轴点

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

1. 应用你的旋转

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

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

注意：一切都在世界坐标中，因此您可能需要适当地转换。

原文由 TheJim01 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

Let’s assume you want to rotate a camera around an anchorPoint ( camera is an instance of THREE.Camera and 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);

原文由 Summer Sun 发布，翻译遵循 CC BY-SA 4.0 许可协议