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 rig

Solution 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