How can I reuse an existing canvas element from multiple components?

[bananu7]

I'd like to have a center canvas element and draw to it from multiple sources. While I could put everything inside one <Canvas>, this prevents me from rendering DOM elements. My use case is as such: I have components that render both to the common 3D view and to the DOM.

My current solution is to split those components into two parts, one being in the "canvas" tree and the other in the regular DOM tree, but that's quite inconvenient when it comes to communication between them.

What I'd like would be something like:

const canvas = useRef();
<>
  <Canvas ref={canvas}/>
  <A canvas={canvas}/>
  <B canvas={canvas}/>
</>

And then in the components:

function A({canvas}) {
  return (<>
    <ReuseCanvas canvas={canvas}>
      <mesh ... />
    </ReuseCanvas>
    <div>
      DOM goes here
    </div>
  );
}

So far my research has brought me to createPortal both on React and R3F side, but neither is actually a good solution here, because createPortal still puts the React nodes into the tree, which seems to be causing problems when they're mixed like that. I've also looked at Drei's Html and R3F's Canvas implementation, which call React's render and R3F's render respectively, and I tried a simple attempt, but that didn't work (well, it did produce one frame and crash):

export function ReuseView3D(props: ReuseViewProps) {
    useLayoutEffect(() => {
        render(
            props.children,
            props.canvasRef.current
        )
    }, [props.children, props.canvasRef.current])
    return null;
}

[CodyJasonBennett]

I'd suggest something like https://github.com/pmndrs/tunnel-rat for this.

[bananu7]

Excellent. Seems exactly like what I needed, I'll give it a try, thanks!