Disable auto resize

[hatsumatsu]

Is there any way to disable the automatic resizing feature that syncs the renderer size with the container element's size?

I have a use case where I need to set the canvas size declaratively (AR) independent from the container size. I tried resize={null} on the <Canvas>without luck.

[joshuaellis]

Couldn't you wrap it in a div and then size that accordingly?

[hatsumatsu]

@joshuaellis yes and no. The output I'm looking for is a fixed aspect ratio (based on the AR implementation, like 4:3) and then scaling it up to fill the screen like object-fit:cover does on a video/image/canvas.

Scaling the parent accordingly via JS is ofc a valid approach.
I was merely wondering if there is a switch to disable it/ overwrite it via props.

[drcmda]

use the render function and everything is in your hands. https://docs.pmnd.rs/react-three-fiber/API/render-function "Canvas" is just a component that uses that function + a resize observer.

[hatsumatsu]

@drcmda again thanks for the hint! For anyone else interested, I created a minimal example using the render function within a react component tree:

https://codesandbox.io/s/r3f-render-function-ile0h

This one enables custom sizing and could be handy in in edge cases like #1394