Getting the scene.pointerX "through" a div in the canvasZone

Hello,
I created a scene in which div-based labels get shown above the babylon canvas using the canvasZone style overlay.
However when dragging object within Babylon using the

scene.onPointerObservable.add

I do not get any values for

scene.pointerX/Y

because of the div taking focus.
I still need the div to have mouse events so I cannot just disable these.
What would be the workaround

Thanks

So from my experience here’s what I can share: The GUI editor currently in development is a combination of react/css UI with a Babylon scene rendered an adt in the middle. I use mouse events in the Babylon scene to do the dragging for the GUI controls. However in the earlier days I had a mistake where I was rendering another div behind the scene which was causing Babylon scene to lose focus and force cancelling the mouse drag events.

My suggestion for a workaround. Is there a reason why you are using a div over the Babylon canvas? Is this an effect that you can recreate using the Babylon GUI instead?

@EvilTwinsNiceBrother, is scene.onPointerObservable actually firing its observable when you do your dragging? If so, how do you have it set up in the code? For example, do you have it so that you’re pulling the coordinate data from the observable’s parameter?

scene.onPointerObservable.add((pointerInfo) => {
    // Do something with pointerInfo.event.clientX
    // And/or something with pointerInfo.event.clientY
});

If that isn’t what you’re doing or isn’t working for you, the only workaround that comes to mind is to add an EventListener to the divs.

Hello and thanks for the answers.
@msDestiny14 Well, I could not use GUI as for the special reason on how my labels ( the divs ) have to look. I could not recreate that with GUI. Might give it a try another time.
@PolygonalSun scene.onPointerObservable is firing when I drag and all works fine. But as soon as I drag “over” a div ( sometimed due to a slight lag ) the firing stops.
I ended up adding EventListeners to the divs but that reuired a lot of different handlers to deal with all the pointerout, pointerin, etc.
It works for now, but I might want to give the GUI another hard look.

I made a quick and dirty playground:
https://playground.babylonjs.com/#YXBSLU
you might get the idea.

Thanks

Feel free to give it another try! And we’ll be here if you need any GUI help! :slight_smile:

Probably it help:
You can save HTML to canvas and then save canvas as image (Blob) and then generate texture from that image and place labels with this textures in your scene.
Don’t know will be it useful.
And i thik combine UI (scene + HTML UI) not always is good idea.

i used this and it works in general: html2canvas - npm