Limit perspective camera/orbit controls to a half cylinder (180 degree video player)

Hi everyone, first time joining here. Just trying three.js for the first time for a project, and I’m a bit stuck.

I have a long 180 degree video, and I’m trying to display it in a site with controls to move around similar to a 360 player.
I have managed to render the video on a half cylinder like shown in the picture. I am now trying to “lock” the camera or orbit controls so that the user can move/zoom around, but they are limited to that view, so they can’t see the background or really see the cylinder behind.

Playing around with it, I came up with some limits for polar angle (both min/max): Math.PI / 2, distance (both min/max): videoHeight / 2 / Math.sin(15) (fov is 30) , but I can’t really find the right formula for the azimuth angle. I came up with the other numbers by experimenting with different values.

The above also only works if I disable zooming (lock the min/max distance on both sides). As soon as the zoom changes, these min/max angles also change, and I can’t figure out the right formulas.

Is this the best way to achieving what I described above? And if so, can someone help me with the math for the azimuth angle?
It’s my first time working with three.js and I still find it hard to wrap my head around the camera math

A gif showcasing the ideal result:
You can see as I’m moving around, sometimes I go over the cylinder limit. That’s what I’m trying to fix ideally

It definitely looks like the azimuth angle is related to the viewport. Resizing the window, both width and height, changes the maximum angle value

What I’m doing is manually moving to the max angle, and then using orbitControls.getAzimuthalAngle() to see wha the angle is

I did the same for the other two and experimented with the values to reverse engineer the formulas