Three.js - 如何旋转对象以朝向一个点并面向另一个方向

Question

我刚开始接触three.js和三维编程，所以这可能是一个非常简单的问题。理想情况下，我希望答案能帮助我理解其基本原理。

我有一个需要“指向”另一个点（在这种情况下为原点，出于简单起见）的对象，可以使用Object3D.lookAt(point)函数轻松实现。这将使对象的Z轴指向该点。

我还想围绕它的Z轴旋转我的对象（称为looker），使其X轴大致指向另一个对象refObj。我知道除非该对象与原点形成直角，否则X轴无法直接指向refObj。我希望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示例，与上面图示相同

- Yona Appletree

Answer 1

你实际上想要的是物体的纵轴（物体的up-向量）与平面垂直。

在调用lookAt（origin）之前，您只需设置对象的up-向量即可。

通过对您所知道的位于平面上的两个向量进行叉积，可以计算出所需的up向量。

three.js r.143

- WestLangley