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屋!