How to update the latest camera rotation with mouseX and mouseY

Questions
,
1

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:
https://jsfiddle.net/24wy9t16/2/

top view of the scene

image
image1412×1254 85 KB

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

image
image1598×574 48.8 KB

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

image
image998×330 28.1 KB

2

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

currentScreenRotY

And the current minimal mouse rotation in

currentMouseRotX
currentMouseRotY

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.