Three.js camera.rotation.y to 360 degrees conversion

Question

I'm trying to rotate a 2D object (in a GTA style minimap overlay) relevant to the Three.js camera rotation.y value in my 3D scene.

The problem is the radians returned from camera.rotation.y value are a bit strange, going from 0 > -1.4 radians through the first 45 degrees, back from -1.4 > 0 radians through to 90 degrees, 0 > 1.4 radians through to 270 degrees, and 1.4 > 0 radians to 360 degrees.

Does anyone know a way to convert or translate these values into 360 coords?

I'm using PerspectiveCamera and OrbitControls.

Thanks in advance!

Answer 1

I think this might be related to converting from quaternion rotations. Not sure if the following example is correct but it might help in you finding the solution.

const euler = new THREE.Euler();
const rotation = euler.setFromQuaternion(camera.quaternion);
const radians = rotation.z > 0
    ? rotation.z
    : (2 * Math.PI) + rotation.z;
const degrees = THREE.Math.radToDeg(radians);

This results in degrees having a value from 0 to 360 but as the camera rotates the angle values seem to change at an inconsistent rate.

Here's a codepen that demonstrates this behaviour:

http://codepen.io/kevanstannard/pen/NdOvoO/

I used some details from the following question:

three.js perspectivecamera current angle in degrees

Edit #1

Based on the answer from @WestLangley my answer above is not correct, so just to document the improvement, here's some code based on West's solution:

// Set Y to be the heading of the camera
camera.rotation.order = 'YXZ';

And then

const heading = camera.rotation.y;
const radians = heading > 0 ? heading : (2 * Math.PI) + heading;
const degrees = THREE.Math.radToDeg(radians);

And a better codepen

http://codepen.io/kevanstannard/pen/YNJgXd