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, Commented Dec 7, 2016 at 17:53
@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
– arvere, Commented Dec 7, 2016 at 18:04

Community · Accepted Answer · 2017-05-23 12:08:42Z

3

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

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Dec 7, 2016 at 18:46

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rotate camera X on local axis using Three.js

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related