Canvas resize and weird mesh aspect ratio behaviour

[fogre]

After updating to the most recent Fiber version, I experience weird behavior on initial canvas size.

Before resizing the screen, all the meshes in the canvas get stretched by viewport aspect ratio (i.e. if viewport width is more than height, they get stretched sideways)

After resize, they keep change into their intended aspect ratio (back to squares).

Example:
https://codesandbox.io/s/vigorous-water-tu8kvi?file=/src/App.js

I recommend you to widen the the sandbox browser window first, then reload the screen, and then change the sandbox browser window width.

I didn't have this issue with the earlier version "react-three-fiber": "^5.3.18"

Thanks!

[drcmda]

a camera needs aspect ratio, i'd suggest you use drei/perspectivecamera, it is responsive automatically: <PerspectiveCamera makeDefault />

otherwise

  const viewport = useThree(state => state.viewport)
  useLayoutEffect(() => {
    cameraRef.current.aspect = viewport.width / viewport.height
    cameraRef.current.updateProjectionMatrix()
  }, [viewport])