three.js - Three.js 中的移动相机、LookAt 和旋转

Question

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

我在 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。

Answer 1

要解决此问题，您可以在执行 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() 之前设置 up 向量非常重要。

我在 http://jsfiddle.net/VsWb9/991/ 创建了一个完整的示例有2个立方体。较小的应该位于大的之上(在正 z 轴上)。