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?
我正在构建第一人称射击游戏的基础，因此我可以理解一切的工作原理，主要是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轴旋转时：
1 | camera.rotation.x += degToRad(upRot); |
通过z轴旋转时：
1 | camera.rotation.z += degToRad(upRot); |
因此事实证明，有一个非常简单的解决方法。
在创建相机后添加以下代码行：
1 | camera.eulerOrder ="YXZ"; |
该问题是由于Three.js旋转相机或任何其他对象的方式引起的。 Three.js旋转与对象的其他轴相关，这意味着z轴(默认情况下)将取决于y轴，而y轴将取决于x轴。
默认的eulerOrder为" XYZ"。这意味着在不更改y轴的情况下旋转x轴而不是z轴不会有不同的效果。
通过将eulerOrder更改为" YXZ"，首先我们左右旋转，然后上下旋转，最后滚动，为第一人称射击游戏提供所需的效果。
感谢Three.js IRC中的WestLangley和灰尘。