使用 Three.js 在局部轴上旋转相机 X答案

【问题标题】：Rotate camera X on local axis using Three.js使用 Three.js 在局部轴上旋转相机 X
【发布时间】：2017-04-22 09:54:11
【问题描述】：

我是 Three.js 的新手，对 3d 空间引擎还很陌生，我想要实现的是 360 度等距矩形图像查看器。

到目前为止，我的脚本所做的是在 0,0,0 处创建一个相机，并在同一位置创建一个球体网格，法线反转和我的 360 度图像的发射贴图。

使用 Blender 的视口表示场景。

用户应该能够使用鼠标拖动或键盘箭头来旋转相机，因此我使用鼠标侦听器创建了拖动功能，该功能计算相机 Y 轴（蓝色）和 X 轴（红色）的旋转量渲染帧。我还在 X 上创建了最小和最大旋转限制（因此用户无法向后旋转），如下所示：

var render = function () {
    requestAnimationFrame( render );

    if((camera.rotation.x < Math.PI/6 && speedX >= 0) || (camera.rotation.x > -Math.PI/6 && speedX <= 0))
        camera.rotation.x += speedX * (Math.PI/180);
    camera.rotation.y += speedY * (Math.PI/180);

    renderer.render(scene, camera);
};

其中speedX和speedY代表每个轴的旋转量。

到目前为止一切都很好，但是由于这些旋转坐标是相对于世界而不是相机本身，所以 X 旋转会使相机变得狂野，因为在 Y 轴上旋转了几度之后，相机的 X 轴是 no长度与世界的 X 轴相同。

最后，我的问题是：如何在每一帧沿自己的 X 轴旋转相机？

【问题讨论】：

等角全景图demo
@avere 试试camera.rotation.order = 'YXZ'。 // 偏航、俯仰、滚动
@WestLangley 太棒了！奇迹般有效！你介意写一个更深入的答案，所以我可以接受它并且（希望）我和其他人可以理解魔法吗？非常感谢！

标签： three.js

【解决方案1】：

如果您希望相机的旋转在偏航（航向）、俯仰和滚动方面有意义，您需要设置：

camera.rotation.order = 'YXZ'; // default is 'XYZ'

有关详细信息，请参阅this stackoverflow answer。

three.js r.82

【讨论】：