在three.js中围绕某个点旋转对象的正确方法是什么？

Question

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

$sql= " SELECT * FROM dtr WHERE Course like '%$course%' AND Year_enrolled like '%$year_enrolled%' AND (Month like '%$month%' AND Year like '%$year%')";

这样做有效，但它具有令人难以置信的限制 - 如果你想围绕一个不同的点旋转一个物体，你就不能，因为一个物体不能有两个父母。

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

//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;

同样，这是有效的，但似乎并不是设置旋转点的方法。它始终是世界的起源。

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

最终我希望能够制作一个遵循S形路径的立方体，但如果没有这个（看似）基本的东西，我发现它相当困难。

tl; dr我想围绕一系列不同的点旋转一个three.js对象。什么是接近它的好方法？

Answer 1

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

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

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

1. 将对象移动到轴心点

   1.1。从对象的原始位置减去枢轴点

2. 应用轮换

3. 使用相同的位置矢量

   移动对象BACK

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

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

Answer 2

  

这有效，但它是非常有限的 - 如果你想旋转一个   对象围绕着不同的点，你不能因为一个对象不能拥有   两个父母。

这是事实，但我想知道你有2个父母的默认行为。你可以嵌套东西 - 也就是说，一个女人在车里拿着的相机有2层教养：相机 - ＆gt;女人 - >汽车。但如果相反你想要一些平行的育儿关系（？）让我们说女人拿着相机，但你想让一个男人也同时拿着相机。你如何让男人转身拍摄一些东西，而不是从女人那里拿走，反之亦然？当你试图想象默认会发生什么时，多个父母的想法就会崩溃。那个女人跟相机一起移动了吗？那么这个场景中的相机实际上不是她的父母吗？

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

Luckily there are some things in the scene utils meant for exactly this: namely attach and detach。因此，当您想要关闭对象而不从本地坐标到世界坐标并将其传送到奇怪的地方时，您可以使用附加/分离功能。

请记住，这会产生奇怪的东西，除非newParent在切换时与前一个父母的位置完全相同，因为我们不保证我们的对象与父对象之间的关系，除此之外保持与切换时相同。

Answer 3

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

假设您想围绕camera旋转anchorPoint（camera是THREE.Camera的实例，而anchorPoint是{{1 }}此处）：

THREE.Vector3