Three.js Can fog be applied to an area and not a distance from the camera?
Imagine a scenario in which you have a very large THREE.PlaneGeometry simulating a floor, and you have a camera added to the scene at a random position.
If I manually adjust the near and far fog values, I can somehow hide the appearance of the plane, creating an endless impression. So far so good.
The problem is, what if I make my camera fly around the scene to random positions on the plane? If the random point is close enough to the outside of the plane, the fog will not mask the end of the plane, because the fog is always based on camera position.
So my question is, how can we achieve the fog effect only when you are close enough to the edges of the plane?
source to share
I don't have enough in-depth knowledge of how the nebulous system works, so please if someone can fix me it would be amazing.
I think the fog is only displayed to the camera and you cannot apply that to, say, an object, or you cannot create a fog object (like a cube made with fog) unless you use shaders that can make the object look like " fog ", however, if you enter the object, you will no longer be able to see the fog (or it will not look as expected)
However, you can dynamically change the rendering of the fog based on the position of your camera, more the distance you are far from the center, closer to the fog and closer to the camera. This is fairly easy to achieve by doing a simple subtraction (X is the distance from the center of the plane) where X is the maximum distance the camera can reach.
The distance from the center on the XY plane is also easy, if you position the center of the plane at 0.0, you know automatically the X and Y coordinates where your camera is. Then you can just calculate the hypotenuse about the X and Y axis (see below for my gif).
source to share