Three.js - 向量如何与lookAt（）一起使用？

Question

我试图了解向量和lookAt（）如何在three.js中一起工作。我正在设置此axisHelper的向上矢量，以便Y轴始终指向目标地理位置，这标记向上矢量的位置。它对X和Y有预期的作用，绕Z轴旋转轴;当我尝试调整向上矢量的Z值时，我希望轴绕X轴旋转，但没有任何反应。

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

我有一个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/）

Answer 1

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

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

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

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

three.js r.63

---

提示：three.js中的轴应始终具有单位长度;一定要在你的代码中调用axis.normalize（）。

Answer 2

我认为你的标题意味着在Z而不是X上旋转？

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

有没有一个例子说明你想要完成什么可能对我们有帮助？

也许其他人可以对正在发生的事情进行更深入的解释。希望我的回答能帮助你朝着正确的方向前进。

Answer 3

以下是我了解问题的方法：

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

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

在我的例子中，axisHelper向下看其蓝色Z轴向lookAt向量的方向，这是一个空间中的点（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