ThreeJS X Rotation behaving unexpectedly

Question

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 an

Answer 1

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