Three.js -当相机以90度角旋转时，为什么在x轴和z轴上旋转会产生相同的效果?

Three.js - When the camera is rotated at a 90 degree angle, why does rotating on the x axis and z axis have the same effect?

本文关键字：旋转 轴和 相机 js 90度 为什么 Three      更新时间：2023-09-26

我正在构建第一人称射击游戏的骨架，这样我就能理解一切是如何运作的，主要是3D数学。

我遇到了一个问题，我只能使用Three.js复制。

当相机沿y轴旋转90度(向左看)时，在x轴和z轴上旋转具有相同的效果，它似乎"滚动"相机…

为什么会发生这种情况?为什么旋转x轴不会导致相机"滚动"，而旋转z轴不会导致相机向上和向下看?

我有一个发生这种情况的例子，"问题"不是特定于这个例子(使用向上和向下箭头键旋转):

沿x轴旋转:http://duct.tk/gl/minimal/x.html来源:http://duct.tk/gl/minimal/js/code-x.js

绕z轴旋转:http://duct.tk/gl/minimal/z.html来源:http://duct.tk/gl/minimal/js/code-z.js

两个例子中唯一改变的行:

绕x轴旋转时:

camera.rotation.x += degToRad(upRot);

绕z轴旋转时:

camera.rotation.z += degToRad(upRot);

所以这个问题有一个非常简单的解决方法。

在创建相机后添加以下代码行:

camera.eulerOrder = "YXZ";

这个问题是由于Three.js旋转相机或任何其他对象的方式引起的。Three.js的旋转与对象的其他轴相关，这意味着z轴(默认情况下)将依赖于y轴，而y轴将依赖于x轴。

默认的eulerOrder是"XYZ"。这意味着当y轴没有改变时，旋转x轴而不是z轴不会产生不同的效果。

通过将eulerOrder更改为"YXZ"，我们首先左右旋转，然后上下旋转，最后滚动，从而获得第一人称射击游戏所需的效果。

Thanks to WestLangley and dust_ in the Three.js IRC.

相关文章：