CODEWITHSUNDEEP
javascriptrotationthree.js
Trevor Jex
Trevor Jex

Reputation: 275

ThreeJS X Rotation behaving unexpectedly

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

Any ideas?

Upvotes: 0

Views: 325

Answers (1)

WestLangley
WestLangley

Reputation: 104783

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

That post suggests changing the Euler order to YXZ.

camera.rotation.order = 'YXZ';

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

Upvotes: 1

Related Questions