javascript - Three.js - 如何旋转对象以注视一个点并朝向另一个点

Question

一般来说，我是 three.js 和 3d 编程的新手，所以这似乎是一个非常简单的问题。理想情况下，我希望答案可以帮助我理解基本原理。

我有一个对象需要“指向”另一点(为简单起见，在本例中为原点)，这可以使用 Object3D.lookAt(point) 函数轻松完成。这很好地指向了对象的 Z 轴。

我还想围绕其 Z 轴旋转名为 looker 的对象，使其 X 轴通常指向另一个对象 refObj。我知道 X 轴不能直接指向 refObj 除非该对象恰好与原点形成直 Angular 。我希望 looker 的 X 轴位于由 origin、refObj 和 looker 创建的平面上，如图所示下面:

进行旋转的最简单方法似乎是修改 looker.rotation.z，但我不知道如何计算值应该是多少。

一般来说，我想要一个扩展版本的 lookAt 函数，它采用 X 轴所指向的第二个坐标。像这样:

function lookAtAndOrient(objectToAdjust, pointToLookAt, pointToOrientXTowards)
{
  // First we look at the pointToLookAt
  objectToAdjust.lookAt(pointToLookAt);

  // Then we rotate the object
  objectToAdjust.rotation.z = ??;
}

我创建了一个 jsFiddle with the example diagramed above

Answer 1

您真正要说的是您希望对象的 y 轴(对象的 up 向量)与平面正交。

您所要做的就是在调用 lookAt( origin ) 之前设置对象的 up 向量。

您可以通过对平面中已知的两个向量进行叉积来计算所需的 up 向量。

three.js r.143