Why is my model getting clipped when viewing it with an orthographic camera?

Hello, I have narrowed this down to some simple code. Basically, the camera is clipping parts of my object as if I’m zoomed into the object. I’d create a jsfiddle for this, but it doesn’t seem to be working…

Code:

import { ExtrudeGeometry, Mesh, MeshBasicMaterial, OrthographicCamera, Shape } from "three";
import { Scene, WebGLRenderer } from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export default class BaseScene {

    renderer: WebGLRenderer = new WebGLRenderer({ 
        powerPreference: "high-performance",
        alpha: true,
    });
    scene: Scene = new Scene();
    camera: OrthographicCamera;
   
    constructor() {
        this.camera = new OrthographicCamera(window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0, 1000 );
        this.camera.position.set(10, 10, 10);
        this.camera.zoom = 2;
        this.camera.updateProjectionMatrix();
        
        new OrbitControls( this.camera, this.renderer.domElement );
        this.renderer.setSize(window.innerWidth, window.innerHeight);

        var outterRadius: number = 100;
        var innerRadius: number = outterRadius * 0.866025404;
        var hexShape: Shape = new Shape();
        var hexPoints = [
            [0, outterRadius],
            [innerRadius, 0.5 * outterRadius],
            [innerRadius, -0.5 * outterRadius],
            [0, -outterRadius],
            [-innerRadius, -0.5 * outterRadius],
            [-innerRadius, 0.5 * outterRadius]
        ];

       for (var i = 1; i < 6; i++) {
            hexShape.lineTo(hexPoints[i][0], hexPoints[i][1]);
        }
        hexShape.lineTo(hexPoints[0][0], hexPoints[0][1]);

        const mesh = new Mesh(new ExtrudeGeometry(hexShape, {
            depth: 5,
            steps: 1,
            bevelEnabled: true,
            bevelSize: 0.2,
            bevelOffset: -.2,
            bevelThickness: 0,
        }), [new MeshBasicMaterial({color: "#43a827" }), new MeshBasicMaterial({color: "#753713"})]);
        mesh.position.set(0, 0, 0);
        this.scene.add(mesh);
        this.camera.lookAt(mesh.position);

        document.body.appendChild(this.renderer.domElement);

        this.animate();
    }

    animate() {
        requestAnimationFrame(() => this.animate());
        this.renderer.render(this.scene, this.camera)
    }
}

Result:

@Jacob_Caron what did you do to resolve this?

I think it’s about near and far props