Problem trying to scale the ThreeJS Scene inside a Modal

Questions
1

I’ve encountered a persistent issue in my project over the past few days. I have a 3D Scene embedded within an HTML modal using Bootstrap 5. For the most part, everything works seamlessly; however, a particular problem has been bothering me. Whenever I zoom in, and the modal scales down to fit within the screen, the 3D Scene fails to scale accordingly. Instead, it remains the same size, resulting in an unsightly appearance on the page.

I’m seeking guidance on how to adjust the renderer and the camera to ensure they dynamically match the scale of the modal. Any insights or solutions to resolve this issue would be greatly appreciated. Thank you in advance

2

like this? Basic Threejs example with re-use - CodeSandbox

if you want something like a responsive css percentage unit you need to calculate the viewport, which is the width and height of the canvas in threejs units. a plane.scale.set(viewport.width, viewport.height, 1) would therefore fill the screen. now you can place or scale stuff with percentages. -viewport.width / 2 would for instance one the left edge. viewport.width / 2 * 0.75 would be 75% of the right half etc.