Hide HTML component, when parent is hidden

[dennemark]

Hi,

I took the opportunity and translated the drei HTML component to react-babylonjs (https://github.com/brianzinn/react-babylonjs/pull/165/files). I once did something similar, projecting a 3d point onto 2d scene and place html on to it. But looking into your code, it is much nicer and thorough! (css matrix transforms - that i could not translate yet.. :D )

I might be mistaken, but I realised that the HTML component is shown, even if ancestor objects are visible. I am not familiar with the three api, but I guess you would need to add i.e. to the isObjectVisible function a check, if parent object are visible. I found some function like traverseAncestors or maybe there are some SceneUtils and as soon as you finde one ancestor that is not visible, the HTML component can be set to el.style.display = "none"

Since, I am already here. I realised the HTML is appended to the dom via ReactDOM.render and as far as I noticed you seem to be aware of losing react context. I guess you did not find a way around it i.e. via createPortal? Your current way would be to use useContextBridge?

Best!
Martin