How can you render non-three elements within a canvas?

[oveddan]

Following #786, I want to create a mesh using a video texture, however, I would rather have the <video /> element rendered like a normal react component so I can apply updates to it in the react way.

I know we can't embed non-three objects into the scene, however, I attempt to do something like createPortal to have the <video/> element rendered in document.body.

When I try this, I still get the error:
"Video" is not part of the THREE namespace! Did you forget to extend it?

You can see the code here:
https://codesandbox.io/s/video-texture-with-portal-for-video-i7hd7?file=/src/App.js

Any strategies for how to natively render a <video /> element the react way?

[drcmda]

Portals don't work that way. They only work within the renderer, they can't transport something from one to another. What could work is the html element from the drei library.

[oveddan]

Thank you thats exactly what I needed!