OrthographicCamera's frustrum is different on initial render and after window resize

[smashercosmo]

Problem description:

When you change default OrthographicCamera's frustrum, camera starts behaving pretty weirdly on resize

Check the demo https://codesandbox.io/s/magical-haslett-q09p3 Try to resize browser window vertically

Packages

@react-three/drei: 7.3.1 @react-three/fiber 7.0.6 three: ^0.130.1

[DavidNaumann]

Pulling info across from repeat #548 , repeatable instance of issue: sandbox env

[DavidNaumann]

Code from sandbox environment to repeat the issue:

import { useRef } from "react";
import { Canvas } from "@react-three/fiber";
import { Vector3 } from "three";
import {OrthographicCamera, Box} from '@react-three/drei';

export default function App() {
  const cam = useRef();
  const position = new Vector3(0, 0, 0);

  return (
    <Canvas>
      <OrthographicCamera
        ref={cam}
        makeDefault
        position={[0, 0, 4]}
        right={2.5}
        left={-2.5}
        bottom={-2.5}
        top={2.5}
        zoom={3}
      />
      <ambientLight />
      <Box args={[1, 1, 1]} position={position}>
        <meshStandardMaterial attach="material" color="red" />
      </Box>
    </Canvas>
  );
}

[drcmda]

for reference:

ortho source: https://github.com/pmndrs/drei/blob/master/src/core/OrthographicCamera.tsx

r3f automatic camera handling: https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/core/store.ts#L350-L354

the cameras are responsive by default, you don't need left/right/... unless there's a specific reason for that. but if you do that you have to switch the camera to manual and then r3f takes a hands-off approach.