horizontal field-of-view
In three.js, camera.fov is the vertical field-of-view in degrees.
The horizontal field-of-view is determined by the vertical field-of-view and the aspect ratio of the display image.
const hFOV = 2 * Math.atan( Math.tan( camera.fov * Math.PI / 180 / 2 ) * camera.aspect ) * 180 / Math.PI; // degreesA reasonable value for camera.fov is 40 to 50 degrees. This yields minimal distortion, and depending on the aspect ratio of the display, yields a horizontal FOV of 80 or 90 degrees.
In your example, you have specified a vertical FOV of 75 degrees, which implies a horizontal FOV of about 110 degrees.
Force Three.js to use fovHorizontal
function fovHorizontalToVertical(fovHorizontal, aspect) {
const fovHorizontalRad = (fovHorizontal * Math.PI) / 180;
const fovVerticalRad = 2 * Math.atan(Math.tan(fovHorizontalRad / 2) / aspect);
const fovVertical = (fovVerticalRad * 180) / Math.PI;
return fovVertical;
}
const fovHorizontal = 50;
const aspect = window.innerWidth / window.innerHeight;
const fovVertical = fovHorizontalToVertical(fovHorizontal, aspect);
camera.fov = fovVertical;
camera.updateProjectionMatrix();