VirtualJoysticksCamera and HTML

Hello to everyone :raising_hand_man:t3:

I have a small question. I am using VirtualJoysticksCamera. When I want to use DebugLayer, I can’t click on any features. Similarly, when there is an html on the canvas, I can’t use them either. I want to use the htmls on the canvas. A little help on this, please :innocent:

Here is an example scene: https://www.babylonjs-playground.com/#1H4KMF#15

Hi VoyVoda,

Hmm… Interesting. Regarding the ability to use the debug UI, probably the fastest way to get unblocked will be to just make a keyboard-based toggle to enable/disable the joystick control.

https://www.babylonjs-playground.com/#1H4KMF#16

That’s not a long-term solution, but it might help make it possible to debug things in the immediate term. I’ll keep thinking about the right way to do this; there might be an existing way to tackle it, or it might be more complicated than it looks on the surface. :slight_smile:

1 Like

Well what is happening is that virtualJoysticks are created on the canvas that is created on top of the app. So everything you see is behind that canvas which is blocking everything. So basically that’s known issue and you can find some workarounds, for example for the HTML just try setting z-index higher, and it should be in front of the canvas.

And as inspector is also HTML element so you can do that exact thing to solve your issue.

https://www.babylonjs-playground.com/#1H4KMF#17 (lines 44-48). You get html element of the inspector and set his z-index to 100 for example.

2 Likes

That makes sense. I was thinking more complicated things :sweat_smile: Thank you :pray:t3:

1 Like