How to use OrthographicCamera in react?

Questions
1

There is a basic starter.

It should be a fullscreen red color plane.

However, it seems the same as using perspectiveCamera.

Am I missing something? or. Is it a bug?

function Product() {
    return (
        <>
            <Suspense fallback={null}>
                <Canvas>
                    <OrthographicCamera  
                        left={-0.5}
                        right={0.5}
                        top={0.5}
                        bottom={-0.5}
                        near={-10}
                        far={10}
                        position={[0, 0, 1]>
                        <Model />
                    </OrthographicCamera>
                </Canvas>
            </Suspense>
        </>
    )
}

function Model() {
    return (
        <>
            <mesh position={[0, 0, 0]}>
                <planeGeometry args={[1, 1]} />
                <meshBasicMaterial color={'red'} />
            </mesh>
        </>
    )
}

螢幕截圖 2022-10-02 下午5.36.08
螢幕截圖 2022-10-02 下午5.36.081920×1080 51.4 KB

2 
<OrthographicCamera makeDefault ... />

cameras in drei have a prop called “makeDefault” which sets them as the default. as in,

const camera = useThree(state => state.camera)

anywhere within canvas will react to it and use that camera, including the part that renders out.

if you don’t use that prop it’s just a plain old orthographic camera with less boilerplate. just like in three, you can add a THREE.OrthographicCamera to the scene and nothing at all will change or happen, the camera itself is just an object. something needs to pick it up and render with it.