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'

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

three.js r.82

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

1 个答案: