How to control perspective distortion of THREE.PerspectiveCamera

This is a normal and expected behaviour of how perspective projection is calculated in computer graphics. It uses a flat projection plane, instead of a curved surface. See the diagram below, an object at the left edge should appear horizontally stretched, even if it is at the same distance from the projection plane.

There are several ways to deal with this:

  1. use orthographic projection (at the cost of losing perspectiveness)
  2. use very narrow FOV (at the cost of reduced vision span and a need to zoom/rescale things, also note that small FOV does not eliminate stretching, it only reduces it to a reasonable distortion)
  3. use spherical projection surface (at the cost of mangling with the internals of Three.js or even WebGL, as you cannot use the projection matrix as it is now)
6 Likes