# How to use OrthographicCamera in react?

**URL:** https://discourse.threejs.org/t/how-to-use-orthographiccamera-in-react/43145
**Category:** Questions
**Tags:** camera
**Created:** [October 2, 2022, 9:26am UTC](https://discourse.threejs.org/t/how-to-use-orthographiccamera-in-react/43145 "2022-10-02T09:26:39Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![tomf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tomf/32/29789_2.png) [@tomf](https://discourse.threejs.org/u/tomf)
#### Post date: [October 2, 2022, 9:26am UTC](https://discourse.threejs.org/t/how-to-use-orthographiccamera-in-react/43145/1 "2022-10-02T09:26:39Z")

</div>

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?

```javascript
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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/e/4e3daeb1565be10ca4bb794a6a2f025323e25f36.png)

---

<div class="post-metadata">

### Author: ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)
#### Post date: [October 2, 2022, 11:07pm UTC](https://discourse.threejs.org/t/how-to-use-orthographiccamera-in-react/43145/2 "2022-10-02T23:07:34Z")

</div>

```nohighlight
<OrthographicCamera makeDefault ... />

```

> **[GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber](https://github.com/pmndrs/drei#orthographiccamera)**
>
> 🥉 useful helpers for react-three-fiber. Contribute to pmndrs/drei development by creating an account on GitHub.

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

```nohighlight
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.