CSS3DRenderer and CSS3DSprite in React

Questions
1

Hi,
I am using threejs in react without any extra library. I want to know is it possible to pass react components to CSS3DSprite instead of a dom element.

To clarify this is how I am doing it right now:

    const element = document.createElement("div");
    element.classList.add("hover-test");
    element.style.width = "50px";
    element.style.height = "50px";
    element.style.opacity = 0.5;
    element.style.background = new Color(Math.random() * 0xffffff).getStyle();
    const object = new CSS3DSprite(element);

Is it possible to pass react component in CSS3DSprite constructor. I am creating a 360 panorama experience with hotspots if this is somehow possible than I can create a hotspot component and then just pass the hotspot position in props when adding it to CSS3DSprite constructor.

Sorry if my explanation is not clear.

2

if you use react declaratively it’s natural: https://twitter.com/0xca0a/status/1398633764931178498 this contains interactive tailwind components for instance.

a 360 panorama with antd components: Sky dome with annotations - CodeSandbox

and this is how you occlude html behind geometry: HTML Markers - CodeSandbox

if you need to use threejs imperatively, the effort to make this work would be considerable. css3d is an imperative dom, the very thing react-dom is made to avoid. you can of course simply portal or render into css3d nodes, but to make this reactive is going to cost you.