Three.js - 当摄像机以90度角旋转时，为什么在x轴和z轴上旋转具有相同的效果？

Question

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

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

当相机沿y轴旋转90度（向左看）时，在x轴和z轴上旋转会产生相同的效果，它会显示为＆＃34; roll＆＃34;相机......

为什么会发生这种情况？为什么不按x轴旋转会导致相机“滚动”＃34;并且通过z轴旋转会使相机向上和向下看？

我有一个这方面的例子，＆＃34;问题＆＃34;并非特定于此示例（使用向上和向下箭头键旋转）：

按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);

Answer 1

事实证明这个问题有一个非常简单的解决办法。

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

camera.eulerOrder = "YXZ";

问题是由于Three.js旋转相机或任何其他物体的方式引起的。 Three.js旋转与对象的其他轴相关，这意味着z轴（默认情况下）将取决于y轴，y轴将取决于x轴。

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

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

感谢Three.js IRC中的WestLangley和dust_。