Correcting for perspective clipping in Three.js

Question

I have a plane inside of a sphere in Three.js that I am rendering a shader to so that I can get effects on the sphere. I also use lookAt to align the plane with the camera. The issue I am experiencing is that if the camera gets too close to the sphere the plane seems to shrink into the sphere. I have determined the problem to be from the perspective nature of the camera as when the camera gets too close to the sphere its rays don't align with the edge of the plane anymore.

Here is a picture visualizing this: Perspective clipping

Also here is a JSFiddle that demonstrates this: https://jsfiddle.net/k8tc8ex6/1/

I know why this issue occurs, what I want to know is some possible solutions, what I am trying to achieve is that the edge of the plane will always appear to touch the edge of the sphere after the render.

Thanks so much in advance!

Answer 1

if I am right you are trying to "perfectly" fit mid section of a sphere into frustum of a perspective camera. What you are trying to achieve is impossible with a perspective view. As you said (demonstrated) the plane will exceed the bounds of the screen or there will be gaps with the edges of the plane and the screen.

If you badly want to "perfectly" fit the midsection of a sphere into the screen, you have 2 options:

1-) switch to orthographic camera 2-) stick to perspective camera, make your FOV very close to 0, give a huge distance to far plane so that your perspective camera will actually act as an orthographic camera.