Three.js extract rotation in radians from camera

Question

I've been struggling for a while with the concepts of quaternions and I think that it may have something to do with this particular challenge.

If you know three.js, you may be familiar with the equirectangular panorama video example. What I've been trying to do is to simply extract the camera's rotation at any given moment in a format that I understand (radians, degrees...) for each axis. In theory, shouldn't I be able to simply tap into the camera's rotation.x/y/z parameters to find those out? I'm getting strange values, though.

Check out this example: http://www.spotted-triforce.com/other_files/three/test.html

I'm outputting the camera's xyz rotation values at the upper left corner and instead of expected values, the numbers bounce around between positive and negative values.

Now, this example doesn't use one of the control scripts that are available. Rather, it creates a vector to to calculate a camera target to look at. Here's what the camera code looks like:

function init() {
  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
  camera.target = new THREE.Vector3( 0, 0, 0 );
}

function onDocumentMouseDown( event ) {

  event.preventDefault();
  isUserInteracting = true;

  onPointerDownPointerX = event.clientX;
  onPointerDownPointerY = event.clientY;

  onPointerDownLon = lon;
  onPointerDownLat = lat;

}

function onDocumentMouseMove( event ) {

  if ( isUserInteracting === true ) {

    lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
    lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

  }
}

function onDocumentMouseUp( event ) {
  isUserInteracting = false;
}

function update() {

  lat = Math.max( - 85, Math.min( 85, lat ) );
  phi = THREE.Math.degToRad( 90 - lat );
  theta = THREE.Math.degToRad( lon );

  camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
  camera.target.y = 500 * Math.cos( phi );
  camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

  camera.lookAt( camera.target );

}

Does anybody know what these strange values are that I'm getting and how I can extract proper rotation values that I can then use on another object to mirror the motion?

Answer 1

If you set

camera.rotation.order = "YXZ"

( the default is "XYZ" ) the Euler angles will make a lot more sense to you:

rotation.y will be the camera heading in radians

rotation.x will be the camera pitch in radians

rotation.z will be the camera roll in radians

The rotations will be applied in that order.

three.js r.70