ThreeJS X Rotation 行为异常

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 )

}

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

three.js r.71