Hey all! I used react fiber in one of our projects but the issue I am facing is that the GLB object gets scaled when resizing the browser or is adjusted depending on the browser's size. For example: edge has less page real-estate than chrome, so it renders smaller already on page load.
I have no idea how to fix this actually. Could someone maybe help me out with the math or is there another Drei helper I could use? All help would be appreciated!
The model is sticky, overlaying content, for animation purposes.
#How to keep the canvas from scaling when resizing browser and always render object the same size ?
reef meadow
steel notch
That behavior is what most R3F users would like to have. Even with vanilla Three.js, we spend hours configuring the camera, renderer, canvas(es), etc, just to have that result 😶
Yet, you may find a way around to cut the image instead of resize the inner elements. Mainly, your problem is with vertical resizing, isn't it?
How does your experience looks in a mobile phone? If you will be able to provide images of the issue, that will be useful.
Try capturing with extreme values, I mean making the image short in height and very wide so that you will see if that is your main problem!
wind elbow
r3f has the useThree hooks of camera, aspect, size and useFrame that are likely applicable
steel notch
r3f has the useThree hooks of camera, aspect, size and useFrame that are likely ...
Yet, it is always hard to deal with resizing. You need to update many things! useThree is (for most) the only hook needed since you will find the camera, gl, canvas, etc. in there.
The more interesting question is how should it look like? We are used to R3F's default settings. Even in vanilla, we were creating the same thing!
quasi lagoon