Clever Geek Handbook

90 degree distortion-free field of view in THREE.PerspectiveCamera

I am building a website powered by THREE.js to create a 3D world. I know from experience with video games that they usually use a camera's field of view with a viewing angle of about 90 degrees. However, when I set the PerspectiveCamera in THREE.js for such a high FOV, the scene is severely distorted. This distortion is somehow eliminated in games while maintaining a large field of view. How it's done? Can I do this in THREE.js too? Thank!

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 horizontally? This is what I am trying to get rid of.

enter image description here

+3


source to share


2 answers


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 displayed 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 produces minimal distortion and, depending on the aspect ratio of the display, gives a horizontal FOV of 80 or 90 degrees.

In your example, you specified a vertical FOV of 75 degrees, which means a horizontal FOV of about 110 degrees.

three.js r.69

+8


source


Building on WestLangley's excellent answer, here's 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;
0


source






More articles:


All Articles