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!

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!

• javascript
• 3d
• three.js

• Try setting camera.rotation.order = 'YXZ'; and see if the behavior is more intuitive to you. It may run from - PI to + PI, depending on your use case. – WestLangley Commented Feb 9, 2017 at 12:25
• Thanks @WestLangley, it turns out that was all it needed! Many thanks (y) – DTids Commented Feb 9, 2017 at 15:16
• I posted an answer with further explanation. – WestLangley Commented Feb 9, 2017 at 16:18

3 Answers 3

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

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.

For more information, see this stackoverflow answer.

three.js r.84

camera.rotation is a so called Euler angle as you can also read here in the three.js docs for THREE.Object3D (which is the base class for the THREE.Camera class). You cannot simply get an angle to a certain axis directly from the euler angle, since the angle you get depends on the order of the euler.