Setting default orthographic camera properties (for a full-screen background)

[michaeljblum]

In vanilla Three.js, the OrthographicCamera is typically set by setting left, right, top, bottom, near, and far properties (all numbers). In r3f, all implementations of the default "orthographic" in <canvas> look something like orthographic camera={{ position: [0,0,10], fov: 75, near: 0.1, far: 1000}.

Right now, I'm trying and failing to initialize a camera like I would as follows in ordinary Three.js:

  const camera = new THREE.OrthographicCamera(
    -1, // left
     1, // right
     1, // top
    -1, // bottom
    -1, // near,
     1, // far
  );

Here is my sandbox where I'm trying to set the orthographic camera with r3f.

Note that the shader currently appears very small as I'm trying to replicate the best practice for setting a shader as a fullscreen background, i.e. by setting orthographic camera as above and PlaneBufferGeometry with properties (2,2) (codepen of desired result).

Could anyone please help me better understand how to set OrthographicCamera in r3f as I desire, with the traditional properties of left, right, top, bottom, near, far?

[drcmda]

the two default cameras are for convenience, they auto update and are responsive to browser or even container resize.

if you dont want that, use your own. there's a setDefaultCamera function that allows you to make yours the default. you can also use the cameras from drei: https://github.com/react-spring/drei/

<OrthographicCamera makeDefault left={...} right={...} ... />

PS, you can also switch off auto adjustments:

this is from canvas.tsx

    // #92 (https://github.com/drcmda/react-three-fiber/issues/92)
    // Sometimes automatic default camera adjustment isn't wanted behaviour
    if (updateDefaultCamera) {
      if (isOrthographicCamera(defaultCam)) {
        defaultCam.left = size.width / -2
        defaultCam.right = size.width / 2
        defaultCam.top = size.height / 2
        defaultCam.bottom = size.height / -2
      } else {
        defaultCam.aspect = state.current.aspect
      }
      defaultCam.updateProjectionMatrix()

so <Canvas updateDefaultCamera={false} ... > should do the trick, now you should be able to set these props the traditional way. this flag was added bc of #92

[Purujit-Kulshreshtha]

I'm trying this but I'm getting a weird error.
Attempted import error: 'Geometry' is not exported from 'three'.
This doesn't make sense because it works fine with the default camera.

[drcmda]

there is no geometry any longer in threejs. where do you import geometry?

[michaeljblum]

Awesome! Works perfectly, thanks so much.