Apply clip path and opacity on first layer (composed of multiple shapes) depending on the second layer shape

Hello Three.js experts,

I have a task this is very similar to the attached image and I have big difficulties in finding a solution, most probably because I am a newbie in THREE.js, a suggestion on how to approach this would be very helpful.

Context: this is an animation on a presentation website, when the animation starts the layers pivot up and down and rotate at the end, when the animation finishes, users can hover on top of the shape and the zone hovered on the first layer (the one with dots) pushes the dots away on the axis.

My questions:

  1. How to draw an equilateral triangle with rounded corners and add that glow effect? (I searched the documentation and multiply answers but could not find a solution)
  2. I managed to build the functionality of the first layer as a square of dots and integrated the hover effect, but I could not find a solution to make the first layer crop/clip-path/reduce the opacity of the dots that are not included in the shadow of the top layer. So my question is, how to make the bottom layer dots style depend on the clone of the top layer?
  3. Is this the right approach? I planned this: Create the top layer triangle, create the bottom layer as a square of dots, clone the top layer triangle on top of the bottom square of dots and move its position a little to represent a shadow, then loop through the dots and check if they are inside the clone of the top layer triangle (here I can play with opacities and clip paths/crops on the dots inside/outside/close to the clone of the triangle).
  4. Is three.js too much for what I need, should I try to use a regular HTML Canvas?

Thank you for your time and kindness!