90 degree field of view without distortion in THREE.PerspectiveCamera

Question

I am building a website running on THREE.js to generate a 3D world. From experience with video games, I know they usually use a camera field of view angle of about 90 degrees. When I set PerspectiveCamera in THREE.js to such a high FOV value, however, the scene is severely distorted. This distortion is somehow removed in games while preserving the large field of view. How is this done? Can I do this in THREE.js, too? Thanks!

This is how the camera is created:

new THREE.PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    100, 
    10000000
);

The resulting image is this. See how the earth is stretched in the horizontal direction? That's what I am trying to get rid of.

Answer 1

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.

hFOV = 2 * Math.atan( Math.tan( camera.fov * Math.PI / 180 / 2 ) * camera.aspect ) * 180 / Math.PI; // degrees

A 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.

three.js r.69

Answer 2

Based on WestLangley's awesome answer, here is how to get a fixed horizontal fov in three.js:

var horizontalFov = 90;
camera.fov = (Math.atan(Math.tan(((horizontalFov / 2) * Math.PI) / 180) / camera.aspect) * 2 * 180) / Math.PI;