Three.js - 向上向量如何与lookAt() 一起使用？答案

【问题标题】：Three.js - how do up vectors work with lookAt()?Three.js - 向上向量如何与lookAt() 一起使用？
【发布时间】：2013-12-10 22:12:50
【问题描述】：

我试图了解 upvectors 和 lookAt() 如何在 three.js 中协同工作。我正在设置这个axisHelper的向上向量，这样Y轴总是指向目标geo，这标志着向上向量的位置。对于 X 和 Y，它按预期工作，围绕 Z 轴旋转轴；当我尝试调整向上向量的 Z 值时，我希望轴围绕 X 轴旋转，但没有任何反应。

http://jsfiddle.net/68p5r/4/ [编辑：我添加了地理来显示向上的目标位置。]

我有一个 dat.gui 界面操纵向上向量来演示，但是当我手动设置向量时也存在问题。

我怀疑问题出在第 74 行附近：

zControl.onChange(function(value) {
  axes.up.set(this.object.x, this.object.y, value);
  axes.lookAt(new THREE.Vector3(0, 0, 1));
});

当我更新向上向量时，我指示axisHelper 通过沿Z 轴重做它的lookAt() 来更新它在屏幕上的方向。更改 X 和 Y 可以正常工作，为什么不更改 Z？

（如果我使用 geo 而不是axisHelper，也是这种情况：http://jsfiddle.net/68p5r/5/）

【问题讨论】：

1. three.js 中的轴应始终具有单位长度；请务必致电axis.normalize()。 2. 为什么要更改up 向量？这通常不是必需的。请修改您的帖子并解释。 3. 你想达到什么目的？请在您的帖子中解释。
我只是想了解 up 向量和 lookAt() 是如何一起工作的。我会澄清这个问题。

标签： vector three.js linear-algebra

【解决方案1】：

当您调用Object.lookAt( vector ) 时，对象会旋转，使其内部z 轴指向目标vector。

但这不足以指定对象的方向，因为对象本身仍然可以在其 z 轴上“旋转”。

然后对象被“旋转”，使其内部 y 轴位于其内部 z 轴和up 向量的平面内。

目标向量和up 向量一起足以唯一指定对象的方向。

three.js r.63

提示：three.js 中的轴应始终具有单位长度；请务必在您的代码中调用axis.normalize()。

【讨论】：

谢谢，这就是我理解向量和 lookAt() 工作的方式，这就是为什么我对我在问题中描述的问题感到困惑，如链接的小提琴中所示。
在你的小提琴中，目标向量永远不会改变，所以z轴总是指向同一个方向。
我理解这句话的两半，但不明白这句话是如何从另一句话推导出来的——我一定很难看出问题所在。我将“目标”理解为对象空间向量，将“向上”理解为世界空间向量，正如您所说：两者确定对象的方向。如果上向量的 Z 值发生变化，物体的方向不会跟着变化吗？
又喝了一杯咖啡，但感谢您的评论，我发现了我假设中的缺陷——目标向量在世界空间中，而我的心智模型不正确。
明确一点：up 和 lookat 向量都在世界空间中吗？在此评论中，@mrdoob 似乎在说向上向量在对象空间中，但那是 2 年前...github.com/mrdoob/three.js/issues/1752#issuecomment-5206241

【解决方案2】：

~~我假设你的标题是指在 Z 而不是 X 上旋转？~~

无论如何，罪魁祸首似乎是axes.lookAt(new THREE.Vector3(0, 0, 1));，如果您将所有方法的它更改为axes.lookAt(new THREE.Vector3(0, 1, 0));，则Y 不会按预期旋转。您正在告诉轴助手向下查看特定轴（在您的情况下为 Z）。因此，为什么 Z 值不起作用。

有没有你试图完成的事情可能对我们有帮助的例子？

也许其他人可以更深入地解释正在发生的事情。希望我的回答能把你推向正确的方向。

【讨论】：

在链接的示例中，您可以看到调整 X 和 Y 值会在 Z 轴上旋转轴，因此 Y 轴始终指向目标。调整 Z 值应旋转 X 轴上的轴。我会澄清一下这个问题。
@meetar 啊，你的权利我混淆了价值观和轴的措辞。这现在更有意义了。您的示例始终指向 Z 并在 Z 上旋转，这就是调整 Z 不会旋转它的原因。您是否试图让轴助手旋转以指向由 UI 控制的球体？
我不确定我是否理解您的推理 - 我正在向下看 Z 轴，因为这就是您让 Y 轴“向上”的方式。如果您检查示例小提琴，您会发现调整目标的 Z 值不会改变轴的 X 旋转，尽管我相信它应该。
所以你没有错，但直到@WestLangley 发表评论后我才明白 - 我至少会给你一个赞成票。
不用担心。我认为@WestLangley 最终还是会做出回应。我应该澄清一下，但我很高兴你能弄清楚！

【解决方案3】：

我是这样理解问题的：

lookAt 和 up 向量确定对象的方向，如下所示：

首先应用 lookAt 向量，设置 X 和 Y 旋转，锁定对象 Z 轴指向的方向。
然后向上矢量确定对象如何围绕 Z 轴旋转，以设置对象的 Y 轴指向的方向 - 它根本不会影响 X 和 Y 旋转。李>

在我的示例中，axisHelper 正在沿lookAt 向量的方向向下看它的蓝色 Z 轴，该向量是空间中 (0, 0, -1) 处的一个点——因此 X 和 Y 旋转具有 已经设置好了。剩下要做的就是弄清楚如何围绕其 Z 轴旋转axisHelper，这意味着设置向上向量的X 和Y 点——沿Z 轴向前和向后移动向上向量不会改变任何内容。

这是一个演示这种关系的小提琴：蓝色箭头是lookAt轴，绿色箭头是向上轴。

http://jsfiddle.net/68p5r/8/

 Links to jsfiddle.net must be accompanied by code

【讨论】：