sketch-threejs | Interactive sketches made with three.js. | Graphics library

it's really hard to give generic advice. for 99% of apps mouse interaction happens outside GLSL. put to in three.js terms the mouse input would only manipulate various scene nodes positions and rotations and maybe material settings. that is literally 99% of all 3d apps native or web. For fun people sometimes put some mouse input directly into the shader. then it's up to you. for the fog compute the distance from the mouse position to the vertex in the vertex shader. the closer it is push the positions back or forward or away from th mouse. or in fragment shader use distance to darken.

the problem is you asked for the fog to only come back after a second or two. That is much more work and again something much more likely to be done outside the shader in most apps.

if.you really want to do it in the shader you'd probably use a texture that you draw circles into corresponding to the mouse position. every frame you'd blur that texture so it slowely fades to black. your vertex shader would look into that texture where each vertex would find it's corresponding displacement.

in other words you now need at least 3 shaders. one to draw a circle. it doesn't have to be a circle shader can just be a generic shader that draws triangles that you happen to pass the data for a circle to. You need the shader that fades / blurs the draw history. and you need the fog shader.

there's probably 20 more ways to accomplish this.

a related q&a

Creating a smudge/liquify effect on mouse move that continuously animates back to the original state using webgl

personally I feel like the ones that try to do as much as possible in the shader are more about challenging yourself with limits rather than pragmatic. That can be great fun and good for learning but it is rarely "best practice"