Continuing from before, now that we hole in the house, let’s connect it to the mouse position:

    const checkIntersects = (object) => {
    const modelIntersects = raycaster.intersectObject(object)
    if (modelIntersects.length) {
        uniforms.uTouchPosition.value = modelIntersects[0].point
    }
}

this is what we get:

But I want this opacity gradient to go less even and more “eased out”. For this I’m putting my alpha into power of 3: or maybe even 4 float distance = pow(length(vPosition - uTouchPosition), 4.0);:

Now I want particles to be shown where the hole in the house is, so let’s pass the position into particles shader. But how we gonna use it there? To make particles transparent just like the house would be weird.

Instead, I want to use it for the flow field strength, especially that the model looks reall nice when its covered in particles that are not flying away:

So what we need to do is go to gpgpu shader and check how close our base position is to touch point:

     //flowfieldStrength depending on distance between base and touch position
     float distance = length(base.xyz - uTouchPosition);
     
     //flowFieldStrength between 0 and 7
     float flowFieldStrength = (1.0 - smoothstep(0.0, 1.0, distance)) * 7.0; 

     //apply flowfield to the particle
     particle.xyz += flowField * uDeltaTime * strength * flowFieldStrength;

and finally we’re getting beautiful result!

Next step is to tweak uniforms and maybe area of influence of hover effect.