How to update the latest camera rotation with mouseX and mouseY

Hi Everyone,

I have created a scene with 4 black screen and the camera in the middle and looking at screen 1.
I do added the mouseX and mouseY for camera rotation, purpose of this is for mouse hover the scene, the camera get minor rotation.
The problem is every time I press the next/prev button to rotate camera Y(-90/90 degree) to look at next screen, it will always go back to the screen 1 (0 degree), because of the mouseX and mouseY function affected, is there any idea or solution how to solve this? I have tried a lot of time to fix this but not working :worried:

top view of the scene

this is the code to turn the camera rotation Y to 90 degree.

this is the code of mouse X, Y to make the minor camera rotation.

I’d suggest you seperate the minimal movement from the rotation towards the current screen.
Store these in separate Variables. For example the current screen angle in


And the current minimal mouse rotation in


Update these independently but combine them later during rendering:

function render() {
    // screen rotation only uses Y axis
    camera.rotation.x = currentMouseRotX;
    camera.rotation.y = currentScreenRotY + currentMouseRotY;

This way you can modify both settings separately without them getting in the way of each other.
I think this should work.