How to change DOM node Camera receives events from?

Questions
1

Hi everyone,

Please see here: Babylon.js Playground

Use arrow keys. Camera moves around. Now click button. Key presses have no effect anymore.

Technically, it should be fixable by attaching the event listener to the document; see e.g. here Edit fiddle - JSFiddle - Code Playground

I tried to do that but it seems providing a custom DOM node to Camera.attachControls is deprecated.

From there I lost it. I might have chased it down to engine.getInputElement. But this cannot be changed. There is also a couple of attachControls, attachElement, attachInput functions in various Camera classes but none of them will take an actual DOM node as input parameter. :thinking:

Best wishes
Joe

3

You can always refocus the canvas after the click is done.

4

Thanks @Pryme8 But is there no way to tell Babylon to use another node?

Because imagine there are way more buttons (coming from a framework like Vue). Then you will have these .focus() calls all over the place. Right?

Oh, unless. Ok, this would work https://playground.babylonjs.com/#LND4B7#5. But still, this is hacky.

No wait this does not work either! What if an element does need focus?

5

Two alternatives

A (override attachControl)

B (same as A but with proxy)