Although this question may have been asked before, I haven't been able to find a solution to my specific issue!
I've set up a 3D canvas using WebGLRenderer, PerspectiveCamera, and OrbitControls. My camera's position is at 0, 10, 500 for the circular rotation around a central point in Three.js. I'm using trigonometry calculations for this rotation without affecting the mesh. I've also created directional buttons - Left, Right, Top, Bottom. For example, when I click on the left button, the camera should rotate to the left by 30 degrees. The rotation works fine for left and right directions, but not accurately for top and bottom angles. Specifically, after rotating a particular degree to the left or right, clicking on the top or bottom direction causes the object's X-axis to rotate as well. Upon checking console.log, the X value remains unchanged. Below is my code. Any suggestions are appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
...
</body>
</html>