Three.js-向上向量如何与lookAt()一起使用? [英] Three.js - how do up vectors work with lookAt()?

问题描述

我试图了解up.vector和lookAt()在three.js中如何协同工作.我正在设置该axisHelper的向上矢量，以便Y轴始终指向目标地理位置，这标志着向上矢量的位置.它绕X轴旋转，如X和Y所预期的那样工作.当我尝试调整向上矢量的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/)

解决方案

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

但这还不足以指定对象的方向，因为对象本身仍可以在其z轴上旋转".

然后将对象旋转"，使其内部y轴位于其内部z轴和 up 向量的平面内.

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

three.js r.63

---

提示:Three.js中的轴应始终具有单位长度；请确保在您的代码中调用axis.normalize().

I'm trying to understand how up vectors and lookAt() work together in three.js. I'm setting the up vector of this axisHelper, so that the Y axis always points at the target geo, which marks the position of the up vector. It works as expected for X and Y, rotating the axes around the Z axis; and when I try to adjust the Z value of the up vector I would expect the axes to rotate around the X axis, but nothing happens.

http://jsfiddle.net/68p5r/4/ [Edit: I've added geo to show the up target position.]

I have a dat.gui interface manipulating the up vector to demonstrate, but the problem exists when I set the vector manually as well.

I suspect the problem is around line 74:

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

When I update the up vector, I instruct the axisHelper to update its orientation onscreen by redoing its lookAt() down its Z axis. Changing the X and Y works as expected, why not the Z?

(This is also the case if I use geo instead of an axisHelper: http://jsfiddle.net/68p5r/5/)

解决方案

When you call Object.lookAt( vector ), the object is rotated so that its internal z-axis points toward the target vector.

But that is not sufficient to specify the object's orientation, because the object itself can still be "spun" on its z-axis.

So the object is then "spun" so that its internal y-axis is in the plane of its internal z-axis and the up vector.

The target vector and the up vector are, together, sufficient to uniquely specify the object's orientation.

three.js r.63

---

Tip: An axis in three.js should always have unit length; be sure to call axis.normalize() in your code.

这篇关于Three.js-向上向量如何与lookAt()一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！