移动相机,lookAt和三个.js旋转

时间:2013-01-11 04:27:21

标签: three.js

我无法理解lookAt和相机的旋转。

我在x-y平面上的[0,0,0]周围有一圈小球。

将相机放置在[0,0,30]并在观看之后相机的旋转为[0,0,0]。圆圈看起来好像从上方看(如预期的那样)。

然后我将相机移动到[30,0,0]并在看了之后相机的旋转为[0,90deg,0]。圆圈出现在它的侧面,但垂直,而不是像我期望的那样水平。为什么相机会为y旋转90度?

之后我将相机移动到[0,30,0]并在看了之后相机的旋转为[-90deg,0,90deg]。圆圈再次出现在垂直方向,而不是水平方向。

为什么相机会旋转?我认为根本就没有旋转,因为它本身就在x和y轴上。

感谢您的帮助! : - )

注意:最初发布在https://github.com/mrdoob/three.js/issues/2917但被告知要来Stack Overflow。

1 个答案:

答案 0 :(得分:76)

要解决此问题,您可以在执行lookAt()命令之前指定摄像机的向上矢量。

// Place camera on x axis
camera.position.set(30,0,0);
camera.up = new THREE.Vector3(0,0,1);
camera.lookAt(new THREE.Vector3(0,0,0));

根据需要更改矢量。您甚至可以通过指定负值将其颠倒:(0,0,-1)。使用lookAt()设置向上矢量非常重要。

我在http://jsfiddle.net/VsWb9/991/创建了一个包含2个多维数据集的完整示例。较小的一个假设位于大的顶部(在正z轴上)。