Problem understanding OrthographicCamera (with example).

[GuillaumeSchmid]

Hello,

I am writing a frontend application where buffers containing ram RGBA images are streamed.
I would like to display them as fast as possible with minimum latency.
The solution I am implementing, for the moment, is to display a Plane with an orthographic Camera and put the image as a texture.
But I have a problem understanding Orthographic Camera.
I would like the plane to fill the whole canvas. So I map the orthographic space to -1, 1 in X and Y and I put a simple red plane.
I did the following:

import ReactDOM from "react-dom";
import { Canvas } from "react-three-fiber";
import { OrthographicCamera, Plane } from "@react-three/drei";

const App = () => {
  return (
    <Canvas style={{ height: 400, width: 400 }}>
      <ambientLight />

      <OrthographicCamera
        top={1}
        bottom={-1}
        left={1}
        right={-1}
        near={0.1}
        far={20}
        position={[0, 0, 2]}
      >
    <mesh position={[0, 0, 0]}>
      <Plane args={[1, 1]} >
        <meshStandardMaterial attach="material" color={"red"} />
      </Plane>
    </mesh>
      </OrthographicCamera>
    </Canvas>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

I have strange results:

• The size of the square changes with the z position of the camera (It should not, as an orthographic camera).
• Changing the top or bottom value does not affect the square size (It should, as it changes the view scale in this axis).
• It seems that if I put the Z position around 4, it fill the canvas space, weird!

I also tried to makeDefault the camera like this:

   <Canvas style={{ height: 400, width: 400 }}>
      <ambientLight />

      <OrthographicCamera
         makeDefault
        top={1}
        bottom={-1}
        left={1}
        right={-1}
        near={0.1}
        far={20}
        position={[0, 0, 2]}
      />
    <mesh position={[0, 0, 0]}>
      <Plane args={[1, 1]} >
        <meshStandardMaterial attach="material" color={"red"} />
      </Plane>
    </mesh>
    </Canvas>

But the result is strange as well. The square has the size of a pixel...

Well, I clearly miss something. Would someone enlighten me ?

Guillaume.

[marc-aurele-besner]

First of all, the react-three-fiber package is deprecated in favour of @react-three/fiber
I haven't used an orthographic camera much, so take my answer with a grain of salt.
But I think you should switch to a self-closing tag for OrthographicCamera and add the "makeDefault"
like <OrthographicCamera makeDefault position={[0, 0, 10]} zoom={40} />
with that, I don't see the z axe issue you had in the example
changing top or bottom value act more like a crop of the view port