Disregarding domElement in Camera Control

I was looking trough the code of the Fly Camera Control: Git Url
The function attachControl takes the Parameter element to apply the listener to but in the function itself actually never does anything with this parameter.

This seems like a serious bug since the function itself seems to offer support for other elements but the elements are never used.

I bet its a backwards compatibility thing. Im guessing its a relic of when from when we enabled the observable systems and got replaced with this._engine.onCanvasBlurObservable and this._scene.onKeyboardObservable I believe

I guess this really needs to be updated in the documentation then.

Its a shame tho. I have a case where I either create my own controls completely or use the old version of this function to get it working.

I need to make the youtube element clickable while still beeing able to control the canvas like usualy.
https://playground.babylonjs.com/#1DX9UE#55

That shouldn’t be hard, Id just attach the controls to the canvas as normal then use raycasts to see if you hit your youtube video for clicks.

The Youtube video is a html dom element and not set by babylon. Asides that I want to be able to use any html content there including iframes where I don’t have controle over the inner elements.

Then in this case you need to set the pointer-events to your HTML elements to none.

Then on the scene observerables on a mousedown get the pointer coordinates and that point is in any of your HTML elements clientBox if so simulate a mouse event to the element at that location?

The Html element (ifraame) has to be below the canvas which mean is so then it has to be the other way around. Moving setting the pointer-event of the canvas to none.
This is what I already tried and what worked to some extend, it just shows weird behavior on the phoen which i have to figure out why.
The coresponding added code is in lines 33 to 43.
https://playground.babylonjs.com/#1DX9UE#77

Adding @PolygonalSun our input wizard

Lemme take a look at this and see what’s going on

1 Like