Best way to make Canvas responsive (fixed aspect ratio)

[cdlaporte]

Hello,

I'm trying to make all the contents in my Canvas responsive to window resizing and scale up/down accordingly. The Canvas has a fixed aspect ratio. Is there anything like a svg viewBox attribute available in react-three-fiber that makes this simple? I'm using an orthographic camera that is either programmatically (dolly-like) controlled, or controlled with Trackball Controls to look at an instanced mesh.

Thank you for any help.

[drcmda]

the canvas is responsive by default in that is adapts to resize. objects stay put in their size because that has to do with camera fov. you can use useThree and adapt: https://codesandbox.io/s/reurope-r3f-basic-7kuzy

[cdlaporte]

Thank you for the quick reply!

One last question. Do you know how this example from the main page responds to the height of the canvas: https://codesandbox.io/embed/r3f-instanced-colors-8fo01

Is this a feature of the default camera?

[drcmda]

could be, it just sets the size of the renderbuffer and then aspect = size.width / size.height and updates the projectionmatrix. you can use your own cameras and update them in any way you like though.

[marklundin]

How would you be able to override the default resize behaviour? For example I simple want to cap the camera aspect ratio, so that it is responsive up until a give 16/9 ratio

[drcmda]

i mean, there really isn't much to it. it's just css. if you want it to take a certain size, just style the parent accordingly. if you want to use a custom camera, that you can do as well.

[marklundin]

Yup, the css is fine, I kinda just mean using the default camera but be able to declare alternative camera logic when the viewport changes. I think at the moment it's just mapping the fov to the width, right? But potentially it might be good to have a fixed fov as an option with some sort of functionality similar to cover/contain.

I guess this can be implemented with a custom camera, but wondered if there was a way to just hook into the resize logic itself if you didn't need a new cam

[gandarufu]

Were you able to figure out a way to do this?