title: How do I adjust axes for camera rotated using THREE.DeviceOrientationControls?
body: <p><strong>The short story</strong>: I am trying to use THREE.TrackballControls to move the camera, but the (upside-down) x-z plane is where the x-y plane should be. Can anyone help?</p>
  
  <p><strong>The long story</strong>: I've been trying to add device orientation controls to a project. I have already used the THREE.TrackballControls to move the camera when mouse and touch are being used, and the direction the camera points feeds into other functionality. I am using v69 of three.js.</p>
  
  <p>So, I have been looking into using THREE.DeviceOrientationControls to enable device orientation. Specifically, what I'm after is for rotation to be in the x-y plane when the device is upright in front of me and I turn around. Or in other words, when the device is face up on the table it is looking in the -ve z-direction, and when upside down it it looking in the +ve z-direction. Sounds fairly straightforward, right?</p>
  
  <p>There are plenty of examples around to follow, but I seem to be stuck with axes incorrectly orientated, i.e. what should be my x-y plane is coming out as the x-z plane, but upside-down. I created a test page based on an example with a BoxGeometry cube I found, and then added red, yellow and blue spheres to the middle of the faces that corresponded to the +ve x-, y-, and z-directions respectively, and then pale versions of the same coloured spheres for the corresponding -ve directions. Testing this on an iPad confirmed that the scene axes and the real world axes were not lining up.</p>
  
  <p>I have spent a bit of time trying to get to grips with how this Object works, and the main sticking point is in the function returned by setObjectQuaternion() which does the tricky bit:</p>
  
  <pre><code>...
  return function (quaternion, alpha, beta, gamma, orient) {
      euler.set(beta, alpha, -gamma, 'YXZ'); // 'ZXY' for the device, but 'YXZ' for us
      quaternion.setFromEuler(euler); // orient the device
      quaternion.multiply(q1); // camera looks out the back of the device, not the top
      quaternion.multiply( q0.setFromAxisAngle( zee, - orient ) );    // adjust for screen orientation
  }
  ...
  </code></pre>
  
  <p>where q1 is quaternion for a -pi/2 rotation around the x-axis, and zee is a unit z-axis vector.</p>
  
  <p>I set up a jsfiddle <a href="http://jsfiddle.net/lloydk04/2j1Lqn5f/21/" rel="nofollow" title="jsfiddle">here</a> to help me debug this, but it wasn't rendering correctly on the iPad itself, so I had to add in some faking of orientation events, and plenty of logging, and continue on a normal desktop + console. This jsfiddle goes through each of the 6 basic orientations and sees whether the camera is looking in the direction I expect.</p>
  
  <p>(Initially it would seem that a pi/2 rotation around the x-axis is what is required, but removing the <code>quaternion.multiply(q1)</code> doesn't fix it - I haven't even started looking at non-zero screen orientations yet.)</p>
  
  <p>Ultimately, I'd like to make this more like the TrackballControls/OrbitControls with a target point that the camera always looks at (unless panned) and rotates around, once I've figured this "simple" stuff out.</p>
  
  <p>Anybody have any ideas how I can orientate my camera properly?</p>