Camera 三维相机X轴旋转

我几乎不知道如何解释这个问题，因为如果你看下面我制作的视频，这是自嘲

无角度-

角度-

正如您在无角度版本中看到的，您可以完全正常地旋转Y轴，但当您控制X轴（如“角度”视频中所示）时，您会以一种奇怪的方式旋转，这是有意义的。我希望，正如你可能已经猜到的，X轴保持不变，而Y轴保持从左向右移动，我不希望Y轴从正倾斜到负

我希望这是有意义的，希望有一个很好的解释，我可能错过了一个网站，其中有所有的公式，但我不知道什么是'问题'的名称

我的旋转脚本的一些代码：

var pressed=[0,0,0,0,0,0,0]；
函数更新（）{
$（'#w'）.html（按此键）；
}
设置间隔（更新，100）；
$（文档）.keydown（函数（evt）{
如果（evt.which==87）{
按下[0]=1；
}
如果（evt.which==68）{
按下[1]=1；
}
如果（evt.which==65）{
按下[2]=1；
}
如果（evt.which==83）{
按下[3]=1；
}
如果（evt.which==39）{
按下[4]=1；
}
如果（evt.which==37）{
按下[5]=1；
}
如果（evt.which==38）{
按下[6]=1；
}
如果（evt.which==40）{
按下[7]=1；
}
//console.log（evt.which）；
});
$（文档）.keyup（函数（evt）{
如果（evt.which==87）{
按下[0]=0；
}
如果（evt.which==68）{
按下[1]=0；
}
如果（evt.which==65）{
按下[2]=0；
}
如果（evt.which==83）{
按下[3]=0；
}
如果（evt.which==39）{
按下[4]=0；
}
如果（evt.which==37）{
按下[5]=0；
}
如果（evt.which==38）{
按下[6]=0；
}
如果（evt.which==40）{
按下[7]=0；
}
});
功能检查_按下（）{
如果（按[0]==1）{
camera.position.z=camera.position.z-0.1；
}
如果（按下[1]==1）{
camera.position.x=camera.position.x+0.1；
}
如果（按下[2]==1）{
camera.position.x=camera.position.x-0.1；
}
如果（按下[3]==1）{
camera.position.z=camera.position.z+0.1；
}
如果（按下[4]==1）{
if（camera.rotation.y=Math.PI*2）{
相机旋转y=0；
}否则{
摄像机旋转y+=0.03；
}
}
如果（按下[6]==1）{
如果（摄影机旋转x>=0.5）{
摄像机旋转角度x=0.5；
}否则{
摄像机旋转.x+=0.01；
}
}
如果（按下[7]==1）{
如果（camera.rotation.x您正在自己的坐标系中旋转相机

当
camera.rotation.x
（或
z
）不是0时，y轴将被变换，不再指向上方。这解释了旋转行为异常的原因


如果希望y轴位于世界坐标系中，可以添加一个
THREE.Object3D
作为轴点作为
相机的父对象


现在，相机的
旋转.y
由
枢轴控制：

pivot.rotation.y += 0.03;

…而
位置也是如此：

pivot.position.z = 2.0;

我在上更新了您的代码。
您正在自己的坐标系中旋转相机

当
camera.rotation.x
（或
z
）不是0时，y轴将被变换，不再指向上方。这解释了旋转行为异常的原因


如果希望y轴位于世界坐标系中，可以添加一个
THREE.Object3D
作为轴点作为
相机的父对象


现在，相机的
旋转.y
由
枢轴控制：

pivot.rotation.y += 0.03;

…而
位置也是如此：

pivot.position.z = 2.0;

我在上更新了您的代码。
不需要数据透视。解决此问题的简单方法是设置

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

然后，摄影机旋转将按预期进行

有关更多信息，请参阅

更新小提琴：

请注意，在小提琴中，没有枢轴，也不需要将摄影机添加到场景中

three.js r.84
不需要枢轴。解决问题的简单方法是设置

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

然后，摄影机旋转将按预期进行

有关更多信息，请参阅

更新小提琴：

请注意，在小提琴中，没有枢轴，也不需要将摄影机添加到场景中

three.js r.84
你是如何旋转你的相机的？你有一些代码要显示吗？好了，这是完整的代码。我做了一个小系统，它会检查你是否按住按钮，这就是为什么这么小的系统有这么多代码的原因……我还对你可以往上走多远做了一些限制。看。实验，直到你理解你是如何旋转你的相机的？你有一些代码要显示吗？好了，这是完整的代码。我做了一个小系统，它会检查你是否按住按钮，这就是为什么这么小的系统有这么多代码的原因…我还对你能往上走多远做了一些限制，等等直到你了解Euler angles在three.js中的工作原理。谢谢，很好的解释，你也花了时间进行了修复，这真是太棒了！我一定会自己进行修复，这样我可以从中学习：DThanks，但你应该采用由提出的解决方案；）是的，非常感谢您的帮助，感谢您花时间编辑代码、制作图片等等！别担心，这是一个令人愉快的例子，很好的解释，您也花了时间进行了修复，这太棒了！我一定会自己做修复，这样我就可以从中学习：DThanks，但您应该使用提出的解决方案；）是的，谢谢r帮助，花时间编辑代码，制作图片等等！别担心，这是一种乐趣也谢谢你，我