title: WebGL/OpenGL: Rotate camera according to device orientation
body: <p>I have a web application I am trying to show a plane of map image tiles in a 3D space.</p>
  
  <p>I want the plane to be always horizontal however the device rotate, the final effect is similar to <a href="http://people.opera.com/richt/release/demos/orientation/marinecompass/" rel="nofollow">this marine compass demo</a>.</p>
  
  <p>I can now capture device orientation through the W3C device orientation API for mobile devices, and I successfully rendered the map image tiles. </p>
  
  <p>My problem is me lacking of essential math knowledge of how to rotate the camera correctly according to the device orientation.</p>
  
  <p>I am using the Three.js library. I tried to set rotation of the camera object directly by the alpha/beta/gamma (converted to radian). But it's not working since the camera seems to always rotate according to the world axis used by openGL/webGL not according to its local axis.</p>
  
  <p>I came across the idea of rotate a point 100 unit in front the camera and rotate the point  relatively to the camera position by angles supplied by the device orientation API. But I don't know how to implement this either.</p>
  
  <p>Can anyone help me with what I want to achieve?</p>
  
  <p>EDIT: </p>
  
  <p>MISTAKE CORRECTION:</p>
  
  <p>For anyone interested in implementing similar things, I found out that Three.js objects uses local space axis by default, not world space axis, I was wrong. Though the official document stated that by setting "object.matrixAutoUpdate = false" and then modify "object.matrixWorld" and call "object.updateWorldMatrix()" you can manually move/rotate/scale the object in world axis. However it does not work when the object has a parent, the local axis matrix will always be used when the object has a parent.</p>