I want to achieve a fog effect similar to League of Legends. The fog gradually disappears within the specified radius of the character, and nothing can be seen outside the radius.
I’m trying to use a custom shader, since I don’t know anything about GLSL, I haven’t been able to convert the coordinates of people in the 3D world, to screen coordinates in the fragment shader
The above content is translated by Google, it may not be very accurate, maybe I did not express it very clearly, I am very sorry.
I assume you want to create something like a cloud where a mesh inside is hidden? You can create a fog mesh check whatever is intersected/inside gets the effect and is then hidden with object3d.visible = false.
This is a kind of screen-based fog, not 3D-world-based fog. I think it is related to the vignette postprocessing effect. I might have seen vignette effect for Three.js somewhere in Github, although I have never used it.
In any case, if everything else fails, you can try to do the fog without Three.js. Here is a live demo:
This solution is not feasible, because I found that the platform I am currently using only allows one canvas element to appear, and other elements are not allowed to appear. I now want to add a radial gradient to the front of the camera, with transparent center and solid color around.
Thanks a lot, I have implemented this functionality with your idea, thanks PavelBoytchev.
About the platform: This platform refers to the WeChat “small program” platform. The technology of this platform is very limited, and I am still stepping on the pit step by step~