ThreeJS X Rotation 行为异常 [英] ThreeJS X Rotation behaving unexpectedly

问题描述

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

I'm making a ThreeJS Demo, and I'm currently using the arrow keys to rotate the camera. At first things seem to work out ok. I can successfully rotate up and down, and left and right. However, when I turn to the left, and then try to rotate up or down, it rotates up and down, but NOT relative to my current position - it acts as if I hadn't rotated left at all.

这是我当前的渲染代码:

Here's my current render code:

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 );
}

有什么想法吗?

推荐答案

参见 这个答案 解释了three.js中的旋转是如何工作的.

See this answer for an explanation of how rotations work in three.js.

那篇文章建议将欧拉阶数更改为 YXZ.

That post suggests changing the Euler order to YXZ.

camera.rotation.order = 'YXZ';

但是，在您的情况下，您可能会发现使用 rotateX()/rotateY() 方法更可取.使用这种模式，而不是改变欧拉顺序:

In your case, however, you may find using the rotateX()/rotateY() methods preferable. Instead of changing the Euler order, use this pattern:

if( window.isLeftDown ){

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

}

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

The solution you choose depends on the behavior you prefer.

three.js r.71

three.js r.71

这篇关于ThreeJS X Rotation 行为异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！