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

Posted

技术标签:

【中文标题】在 three.js 中移动相机、lookAt 和旋转【英文标题】:Moving the camera, lookAt and rotations in three.js 【发布时间】:2012-12-25 15:38:55 【问题描述】:

我无法理解 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】:

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

【讨论】:

实际上,当我使用lookAt() 设置up 向量after 时,我发现它可以工作 你可能有一个渲染循环,之后执行投影矩阵更新。

以上是关于在 three.js 中移动相机、lookAt 和旋转的主要内容,如果未能解决你的问题,请参考以下文章

three.js 相机camera位置属性设置详解

three.js 设置和读取相机外观矢量

Three.js - 广告牌效果,相机平移后保持方向

Three.js:改变上轴的方法?

Three.js 进阶之旅:全景漫游-初阶移动相机版

ThreeJS camera.lookAt() 没有效果,是否我做错了啥?