[HELP] How to create an iframe or modal to show the 3d models?

Questions
, ,
1

Hey guys, noob here. I am trying to create a pop-up iframe(or modal) with seperated canvas to display 3d models by clicking a html button, when I click outside of the iframe or a modal, the canvas closed and the 3d models are hidden as well. Is possible to do this?

I am currently using r3f and drei, I am trying to use component but I am not sure how to bind that View(or canvas) to a pop up modal.

The idea is I am trying to create a dragable modal for displaying 3d models, I am stuck on this modal thing… Please enlighten me. Thanks guys!

2

drei view: GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

you do not want multiple canvas, it is very bad for performance, assets can’t be shared, must re-load and re-parse, the browser will kill your tab if you use more than x canvas, and it doesn’t even matter if you close them, it counts against some arbitrary number and when it’s reached your app dies. use views instead.

ps, if you absolutely must, nothing stops you from doing this

<Canvas>...</Canvas>
<Popover>
  <Canvas>...</Canvas>
</Popover>

you can have as many as you want, but as i said, the browser will throw a fit over it eventually.

1 Like