Drawing a scene in front of a webpage, not blocking click events in transparent areas

Questions
1

Hello,
i’m trying to have a mesh floating in front of a webpage. I created the scene with transparent background which works very nicely. But i can’t figure out how to get clicks trough to the elements below. I can disable click events in babylon by setting the canvas to pointer-events: none, but then i cant click on the object anymore. Is there a way i can have both? I don’t need camera control, if that makes it easier.
Any help would be appreciated!

Best,
Josh

2

What is the order of your elements (z-index)?
Could you explain a bit more what do you need? To click on HTML elements which are behind canvas or prevent clicks on HTML element which is before canvas or something else?

3

Thanks for replying!
I want to be able to click on HTML elements behind the canvas if they are visible and at the same time get click events on the mesh floating in front of them if it is picked. So i would want babylon to forward all events that did not pick anything in the scene.

4

I don’t think this can be done automatically.

  1. you need to figure out whether a non-transparent part of the canvas was clicked.
  • If not transparent, do you want to consume the click in the Babylon application?
  • If transparent part, you want to get the offset of the canvas and the position on the canvas where the click was registered.
  1. Then you need to hide the canvas.
  2. Generate a click event at the appropriate place
  3. show the canvas.

Yuck, but it might work alright.

2 Likes
5

I don’t think this is the first time I seen a question about this. Like @trueshot has stated, I do not believe it is built-in and you will have to work some way around it.

Another approach is could have all the positions and sizes of the elements behind the scene stored somewhere. Next click on the Babylon scene and if no 3D object is hit store the clicked position.You can then do the 2D math to calculate if you are inside any of the other elements.

Math reference link for checking if a point lies inside a recntangle

1 Like
6

Hello @eulervoid just checking in, was your question answered?

7

Hey, i gave up on the effort for now as it seems too hacky to forward the events to the DOM elements manually. As the web content is higher priority that the 3D (if the 3d clicks wouldn’t work in some browsers e.g. it wouldn’t be a disaster, while the website would be unusable if the clicks on html wouldn’t work), maybe i will try to disable events on the canvas and manually trigger events in babylon, but this wasn’t a priority for now.

8

You could try to set secne.preventDefaultOnPointerDown = false and scene.preventDefaultOnPointerUp = false ?