Can you display a popup modal inside a react-three-fiber canvas? - reactjs

Question

I am trying to extend this react-three-fiber Game Demo. I want to show a popup modal when the player interacts with a computer. I want to render different React components inside the modal that are styled using TailwindCSS.
Do you know if this is something you can do with react-three-fiber? Any help would be appreciated!

Answer 1

As far as I know, you can't render DOM-elements directly with three.js.
As a workaround, you can create images of your react components for example with html2canvas. Then you use these images as textures for a 2D plane.

Answer 2

Yes it is possible,
If you want to render the element as a game element you can look at sprites or the drei billboards.
drei billboard
If you want to render it as html it's even easier, just put your dom elements outside of the react three fiber canvas element.
like so :
<div>
{showElementState&&<div><input type="range" ref={someRef}/></div>}
<Canvas>
<mesh onClick={()=>setShowElementState(true)} >
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={'orange'} />
</mesh>
</Canvas>
</div>
or you could also just use the leva package(which is recommended on the react-three-fiber github):
https://github.com/pmndrs/leva

Answer 3

This is a simple enough solve, while three.js doesn't render DOM elements it can still be used to manipulate elements already in the DOM. So if you want to change the display of an elements, or have it translate and follow a 3D object this is easy enough with vanilla three.
Lucky for you you have access to all the perks of three-fiber so I would say just use the Drei Html component. I'll just leave the storybook here, it should go over any questions you have for it
Html Storybook Drei