Search code examples
javascriptthree.jscameraperspectivecamera

Three.js - How to change the Perspective Camera's bending/curve?

I'm using a Perspective Camera for my top down Three.js game, but it curves a bit too much because it's designed to be used as "first person view". Is there a way to adjust how much objects bend/curve in the frustum from the sides?

Essentially, I would like something like a mix of a Perspective Camera and an Orthographic Camera

E.g -- The walls of the buildings should be less visible from a certain distance enter image description here

Solution

  • You can adjust the camera FOV.
    https://threejs.org/docs/?q=persp#api/en/cameras/PerspectiveCamera

    Made a simple Pen here:
    https://codepen.io/cdeep/pen/eYEOqrz

    camera.fov = 30;
camera.updateProjectionMatrix ();

    The lesser the FOV, the more flatter things look.
    Please note that you'll need to position the camera farther away at lower FOVs to ensure the contents fit inside the view which also requires you to increase the camera's far property so things don't get cut out