Open smashercosmo opened 3 years ago
Pulling info across from repeat #548 , repeatable instance of issue: sandbox env
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>
);
}
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.
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