Rotate camera X on local axis using Three.js

Question

I'm new to Three.js and fairly new to 3d space engines and what I'm trying to achieve is a 360 equirectangular image viewer.

What my script does so far is to create a camera at 0,0,0 and a sphere mesh at the same location with normals inverted and an emission map of my 360 image.

Representation of scene using Blender's viewport.

The user should be enabled to rotate the camera using mouse drag or keyboard arrows, so using mouse listeners I created the drag feature which calculates the amount of rotation in the camera's Y axis (blue) and X axis (red) at each render frame. I also created min and max rotation limit on X (so the user couldn't spin backward), as follows:

var render = function () {
    requestAnimationFrame( render );

    if((camera.rotation.x < Math.PI/6 && speedX >= 0) || (camera.rotation.x > -Math.PI/6 && speedX <= 0))
        camera.rotation.x += speedX * (Math.PI/180);
    camera.rotation.y += speedY * (Math.PI/180);

    renderer.render(scene, camera);
};

Where speedX and speedY represent the amount of rotation in each axis.

So far so good, but since those rotation coordinates are relative to the world and not the camera itself the X rotation makes the camera go wild, since after a couple of rotated degrees in the Y axis, the camera's X axis is no longer the same as the world's X axis.

My question, finally, is: how do I rotate the camera on it's own X axis at each frame?

@avere Try camera.rotation.order = 'YXZ'. // yaw, pitch, roll — WestLangley
@WestLangley awesome! works like a charm! do you mind writing a more indepth answer, so I can accept it and (hopefully) me and others can understand the magic? thanks a lot! — arvere

WestLangley WestLangley · Accepted Answer · 2016-12-07T18:46:30

If you want a camera's rotation to have meaning in terms of yaw (heading), pitch, and roll, you need set:

camera.rotation.order = 'YXZ'; // default is 'XYZ'

For more information, see this stackoverflow answer.

three.js r.82

Rotate camera X on local axis using Three.js

1 Answers