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

Question

我对three.js和3d编程很新，所以这看起来像是一个非常简单的问题。理想情况下，我希望答案可以帮助我理解基本原则。

我有一个对象需要在另一个点（原点，在这种情况下为了简单起见）“指向”，这可以使用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 with the example diagramed above

Answer 1

你真正想说的是你想要对象的y轴（对象的up - 向量）与平面正交。

在致电up之前，您只需设置对象的lookAt( origin ) - 向量。

通过获取您知道位于平面中的两个向量的交叉积来计算所需的up向量。

这是一个工作小提琴：http://jsfiddle.net/rQasN/43/

请注意，您的问题有两种解决方案，因为计算向量和它的否定都将与平面正交。

编辑：小提琴更新为three.js r.71