Tap Input effect that spreads across multiple meshes

🧑‍💻 Technical Support
1

Hey there,

I wanted to create an input effect that is spread across multiple meshes, that eminates from the mesh that a user taps on, and have the effect lessen as the “ripple” or “wave” of the effect gets further away from the origin point. The actual effect would change color and scale of the mesh temporarily or something, but isn’t important. I’m just not sure how to spread the effect based on where the user taps

Could this be done by using touch event, and then triggering the adjacent stones via scaling and using their colliders?

Thanks in advance for any help

2

Hi, welcome to the forums!

This is a really interesting question. I would probably approach this by creating a custom three.js shader on a plane that’s tracked to the floor.

3

ooof, I wish i knew more 3.js, and could perhaps do it this way in the future . Is the idea with this approach that you create the ripple on the plane via shader, and then this ripple somehow can effect or trigger objects that are at various points on the plane?

4

Hmm, do you have a gif or Figma or anything visual to show the effect you’re trying to make? There might be much simpler solutions like pre-baking the animation in Blender or something else I’m not considering.

You could have it so:

  1. The user taps
  2. It gets all objects in the scene
  3. Sort objects by distance from where the user tapped
  4. Do some affect and delay the effect trigger by the distance of the object

That should give you a nice rippling effect if you set it up right. :thinking: