title: Three.js camera rotation order
body: <p>I'm trying to use a gamepad to rotate a camera in Three.js, using first-person-shooter style controls.</p>
  
  <p>The browser detects the gamepad and recognises it's input, but the camera's order of rotation is wrong. When I rotate on the camera's local Y axis, it takes into account the local X rotation too, which is unwanted.</p>
  
  <ul>
  <li>What I want: <a href="http://jsfiddle.net/fYtwf/3/" rel="nofollow noreferrer">http://jsfiddle.net/fYtwf/3/</a></li>
  <li>What is happening: <a href="http://jsfiddle.net/fYtwf/2/" rel="nofollow noreferrer">http://jsfiddle.net/fYtwf/2/</a></li>
  </ul>
  
  <p>It seems I'm having the same problem as <a href="https://stackoverflow.com/questions/13261270/first-person-simulation-with-three-js-using-keyboard-arrows">this guy</a>, but his issue was solved using Three.js r54 and I'm using r60. He set <code>camera.eulerOrder = "YXZ";</code> to get it working, but the current equivalent <code>camera.rotation.order = "YXZ";</code> doesn't seem to work for me.</p>
  
  <p>I'm aware of Three.js' built-in "FirstPersonControls" class, but it's not suitable for me as it doesn't accept controller input and it would be messy to shoehorn other non-movement controls in there later. I'm also aware of gamepad.js and have no interest in using it.</p>
  
  <p>Can anyone help?</p>
  
  <p>My rotation code:</p>
  
  <pre><code>function pollGamepad()
  {
      gamepad = navigator.webkitGetGamepads()[0];
  
      //Rotation
      if(gamepad.axes[3] &gt; 0.20)
      {
          camera.rotateX(-gamepad.axes[3] * 0.02);
      }
      if(gamepad.axes[3] &lt; -0.20)
      {
          camera.rotateX(-gamepad.axes[3] * 0.02);
      }
  
      if(gamepad.axes[2] &lt; -0.20)
      {
          camera.rotateY(-gamepad.axes[2] * 0.02);
      }
      if(gamepad.axes[2] &gt; 0.20)
      {
          camera.rotateY(-gamepad.axes[2] * 0.02);
      }
  }
  </code></pre>