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

Question

我是 Three.js 的新手，也是 3d 空间引擎的新手，我想要实现的是 360 度等距柱状图像查看器。

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

使用 Blender 视口(viewport)表示场景。

用户应该能够使用鼠标拖动或键盘箭头来旋转相机，因此我使用鼠标监听器创建了拖动功能，该功能可以计算相机的 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'

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

三.js r.82