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。

该帖子建议将欧拉订单更改为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意外地表现出来

1 个答案: