How to prevent raycast from firing when I touch an html element?

Questions
, ,
1

Hello. The problem is I have some overlapping htmls elements and behind is the scene with some “touchable” elements and when I touch for example a html button and behind is a “touchable” element the raycast is activated. is there a way to avoid this? :thinking:

2

Hi! I also have that problem and I can’t solve it.
In my case, I have a mesh matrix. When I click on one, it opens a div, but the raycaster is still reading the meshes.
I have tried to create a for loop over the intersected object and then break it, but it doesn’t work either, or I won’t be doing it right.
I have also tried conditioning the mouse event listener and have not been successful either.
So far, they are the only ideas I have had.

3

An other idea:

const openDiv = () => {
  raycaster.layers.disableAll()
}
const closeDiv = () => {
  raycaster.layers.enableAll()
}
It´s not too much elegant, but work for me.
1 Like
4

Can’t you just make a global variable and make it false and true when mouse enters and leaves that Dom element respectively, and where youre setting up the raycaster events just check that state using if else statement?

5

Will try this and see how works. thanks

6

thanks for reply bhushan6. I use touch instead of click. The problem is I have a input text area that overlay the scene so if the user touch the input and behind is a touchable mesh in the scene it will fire

7

here is example for your case, I hope this works for you. let me know if you do not understand something since code is really messy

8

thanks for your answer. your example is so close of what I need. I understand the logic but as I said. Is a mobile App so mouse events dosen´t work, the events need to be touch. I mean “touchstart”,“touchend”,“touchcancel”,“touchleave”,“touchmove”.

This a picture of the app. She has many touch spots. One is in her stomach. so if someone touch the input text she will react and I don’t wanna that.

touchbug
touchbug411×823 113 KB