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: https://media.giphy.com/media/U0FzVO9iMzm42jMcbC/giphy.gif
You can see as I’m moving around, sometimes I go over the cylinder limit. That’s what I’m trying to fix ideally
