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

【问题标题】：Three.js - How to rotate an object to lookAt one point and orient towards anotherThree.js - 如何旋转对象以查看一个点并朝向另一个点
【发布时间】：2012-12-24 09:14:29
【问题描述】：

我是一般的 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

【问题讨论】：

标签： javascript 3d three.js

【解决方案1】：

您真正想说的是，您希望对象的 y 轴（对象的 up-vector）与平面正交。

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

您通过取两个已知位于平面内的向量的叉积来计算所需的up 向量。

这是一个有效的小提琴：http://jsfiddle.net/rQasN/43/

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

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

【讨论】：