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

有关 three.js 中旋转工作原理的说明，请参阅 this answer。

post 建议将欧拉阶数更改为 YXZ。

camera.rotation.order = 'YXZ';

但是，在您的情况下，您可能会发现使用 rotateX()/rotateY() 方法更可取。不要更改欧拉顺序，而是使用此模式：

if( window.isLeftDown ){

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

}

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

three.js r.71

ThreeJS X Rotation 表现异常

ThreeJS X Rotation behaving unexpectedly

javascript

rotation

three.js