three js sphere device controls limit camera rotation

Question

using three js to create a sphere and adding a 360 deg picture inside. now, the photo has a black hole at the bottom.

is there a way to limit camera rotation and prevent user from seeing the very bottom of the sphere?

I have this for camera:

this.controls = new THREE.DeviceOrientationControls(this.camera, true);

• also looking for a solution while using OrbitControls.

this.controls = new THREE.OrbitControls(this.camera, this.element);

target devices: mobiles support webgl.

Answer 1

From the source of the THREE.OrbitControls. As you can see you can limit the controls rotation.

// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians

// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
this.minAzimuthAngle = - Infinity; // radians
this.maxAzimuthAngle = Infinity; // radians