javascript - ThreeJS X 旋转行为异常

Question

我正在制作 ThreeJS 演示，目前正在使用箭头键旋转相机。起初一切似乎都很顺利。我可以成功地上下左右旋转。但是，当我向左转动，然后尝试向上或向下旋转时，它会向上和向下旋转，但与我当前的位置无关 - 它的作用就好像我根本没有向左旋转一样。

这是我当前的渲染代码:

function render() {
plane.rotation.y += 0.005;
cube.rotation.z += 0.01;
 cube.rotation.y += 0.01;
if(window.isLeftDown){
    camera.rotation.y += 0.01;
}
if(window.isRightDown){
    camera.rotation.y -= 0.01;
}
if(window.isUpDown){
    camera.rotation.x -= 0.01;
}
if(window.isDownDown){
    camera.rotation.x += 0.01;
}
requestAnimationFrame( render );
renderer.render( scene, camera2, renderTarget, true);
renderer.render( scene, camera );
}

有什么想法吗？

Answer 1

参见this answer了解如何在 Three.js 中进行轮换。

该帖子建议将欧拉阶更改为 YXZ。

camera.rotation.order = 'YXZ';

但是，就您的情况而言，您可能会发现使用 rotateX()/rotateY() 方法更合适。不要更改欧拉阶，而是使用以下模式:

if( window.isLeftDown ){

   camera.rotateY( 0.01 ); // or rotateX( +/- 0.01 )

}

您选择的解决方案取决于您喜欢的行为。

三.js r.71