Overlaying components on the globe component

[MichaelBonnet]

Is your feature request related to a problem? Please describe. No

Describe the solution you'd like The ability to render and remove components that are overlaid on the globe component. For example, if I click a 3Dobject, I can then use the onObjectClick to then cause something like a table to open in the corner that shows relevant data.

Essentially, lets the globe component itself just be a fully functional UI component as a full window.

Something (very roughly) akin to:

Describe alternatives you've considered using the onObjectClick callback to update parent props that will then modify other components elsewhere on the page. This however, doesn't look as nice or smooth.

Additional context N/A

[MichaelBonnet]

I have also tried to render this over a Canvas from react-three-fiber but get errors from having <div>s inside, which I have to assume is from the underlying code in react-globe.gl: R3F: Div is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively

And the existing documentation is ... unclear at best for how to do this properly.

[vasturiano]

@MichaelBonnet have you considered placing an absolute positioned table/div that displays overlayed on the globe canvas, but is not part of its children in the DOM?

[MichaelBonnet]

The issue then is managing two different roots in the same app since this would be separate from the main one.

[vasturiano]

You mean two different DOM roots? Why would that be necessary? I'm not seeing the reason why both the globe and canvas and the info table couldn't be siblings in the same DOM tree.