three.js - 在 three.js 中移动相机、lookAt 和旋转

Question

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

我在 xy 平面上的 [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。

score 79 · Accepted Answer

要解决此问题，您可以在执行 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 轴上）。

1 回答 1