使用Three.js在本地轴上旋转相机X

Question

我是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轴不再相同作为世界的X轴。

最后，我的问题是：如何在每个帧的自身X轴上旋转相机？

Answer 1

如果要使摄像机的旋转在偏航（航向），俯仰和横滚方面具有含义，则需要设置：

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

有关更多信息，请参见此stackoverflow答案 。

three.js r.82