Three.js cant see corner of cubes

Question

I created an Orbital Controls with a boxGeometry to render a box. However, when I zoom to my desired distance from the box, the corners of the box do not get rendered like so:

I am currently using react-three-fiber and react-three-drei

const SceneItems = () => {
    return (
        <>
            <OrbitControls
                minDistance={0.001}
            />
            <ambientLight intensity={0.5} />
            <spotLight position={[10, 15, 10]} angle={0.3} />
            <Cube />
        </>
    )
}

const CompleteScene = () => {
    return (
        <div id={styles.scene}>
            <Canvas
                camera={{ position: [0, 0, 0] }}
                orthographic={true}
            >
                <SceneItems />
            </Canvas>
        </div>
    )
}

I figured I could reduce the minDistance on the OrbitalControls but to no effect. What am I missing?

Answer 1

Not sure if this counts as a complete answer, but for whatever reason when I remove the camera property in <Canvas> I am finally able to get the result that I want. I think since <Canvas/> provides a perspectiveCamera by default and I added the props there, it overrode my added orbitalControls.