Vertical Lens Shift

I’m doing an animation moving vertically along a building. With the perspective camera, there is some distortion near the edges, as expected. But I would love to have the side edges of the building being vertical.


In blender there is a vertical lens shift or tilt shift but I can not find anything similar for three.js.

Technically it should be possible by changing the projection matrix, but I cannot imagine that I am the first one wanting to achieve that as it is a common topic when it comes to architecture.

So am I searching for the wrong terms? Or does anyone know a trick?

as long as the camera looks at the horizon, the edges will be vertical. the situation on the left will only happen if the camera looks up.

Indeed. In my case, the camera has to be looking down indeed. Sorry I forgot to mention that.

Indeed. I would be something like that: Edit fiddle - JSFiddle - Code Playground

Have you considered using an OrthographicCamera rather than a perspective one?

yes, but I want to have some depth, when elements are in the front or in the back of the scene.

Look up skew projection matrix.

1 Like

Is that like the column-based renderer that DOOM-style engines used back in the 90’s with affine texture mapping?

To clarify, this basically means that every 100% vertical line between two vertices remain completely vertical, regardless of camera angle. This is why looking up and down in the old DOOM and Build (duke3d, shadow warrior, etc) feels very weird, because it isn’t physically correct.

And no, I have no clue on how to do it in three. :man_shrugging: