在three.js中移动相机、观察和旋转 [英] Moving the camera, lookAt and rotations in three.js

问题描述

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

I'm having trouble understanding lookAt and the rotations of the camera.

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

I have a circle of small spheres around [0,0,0] on the x-y plane.

相机放置在 [0,0,30] 处，查看后相机的旋转为 [0,0,0].圆圈看起来好像是从上方看的(正如预期的那样).

The camera is placed at [0,0,30] and after a lookAt the rotation of the camera is [0,0,0]. The circle appears as if looking from above (as expected).

然后我将相机移动到 [30,0,0]，然后查看相机的旋转是 [0,90deg,0].圆圈出现在它的侧面，但垂直，而不是我预期的水平.为什么相机为 y 旋转了 90 度?

Then I move the camera to [30,0,0] and after a lookAt the rotation of the camera is [0,90deg,0]. The circle appears on its side, but vertically, not horizontally as I would expect. Why is the camera rotated by 90 degrees for y?

之后我将相机移动到 [0,30,0]，然后查看相机的旋转是 [-90deg,0,90deg].圆圈再次出现在它的侧面，垂直而不是水平.

After that I move the camera to [0,30,0] and after a lookAt the rotation of the camera is [-90deg,0,90deg]. The circle again appears on its side, vertically, not horizontally.

为什么相机在旋转?我认为根本不会有旋转，因为它本身在 x 和 y 轴上.

Why is the camera rotating? I thought that there would be no rotation at all since it was on the x and y axes themselves.

感谢您的帮助！:-)

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

Note: Originally posted at https://github.com/mrdoob/three.js/issues/2917 but was told to come to Stack Overflow.

推荐答案

要解决此问题，您可以在执行 lookAt() 命令之前指定相机的向上向量.

To fix the problem you can specify the up vector for the camera before executing the lookAt() command.

// 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() 之前设置向上向量很重要.

Change the vector to your needs. You can even turn it upside down by specifying a negative value: (0,0,-1). It is important to set the up vector BEFORE using lookAt().

我在 http://jsfiddle.net/VsWb9/991/ 创建了一个完整的示例用 2 个立方体.假设较小的位于较大的顶部(在正 z 轴上).

I have created a full example at http://jsfiddle.net/VsWb9/991/ with 2 cubes. The smaller one is suppose to be on top of the big one (on the positive z-axis).

这篇关于在three.js中移动相机、观察和旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！