Orthographic camera is cutting rendered scene in half

Question

I have a project that is using Orthographic camera and MapControls and my scene is rendering as it should,

However the camera is cutting the render scene in half like this

I am initializing my orthographic camera like this

export class OrthoCamera extends THREE.OrthographicCamera {

  constructor(
    renderingContext: HTMLCanvasElement,

  ) {
    super(
      renderingContext.offsetWidth / -2,
      renderingContext.offsetWidth / 2,

      renderingContext.offsetHeight /2,
      renderingContext.offsetHeight / - 2,

      0.1,
    );
    this.move(2, 2, 2);

  }

Further more I am creating Map controls as follows

export class Controls extends MapControls {
  constructor(camera: OrthoCamera, renderingContext: HTMLCanvasElement) {
    super(camera, renderingContext);
    this.enablePan = true;
    this.enableRotate = true;
    this.target.set(40.0, 3.0, 40.0);
    this.update(0.1);
    this.maxDistance = 240;
    this.maxPolarAngle = Math.PI / 3.2;
    this.minPolarAngle = Math.PI / 3.2;
  }
}

And finally I am putting everything together like so

this.camera = new OrthoCamera(renderingContext);    
this.controls = new Controls(this.camera, renderingContext);

Answer 1

I suggest you use a different way of setting up the orthographic camera:

export class OrthoCamera extends THREE.OrthographicCamera {

  constructor( renderingContext: HTMLCanvasElement ) {
  
    const aspect =  renderingContext.offsetWidth / renderingContext.offsetHeight;
    const frustumSize = 25;
  
    super( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 0.1, 1000 );

  }

}

You can easier adjust the frustum size if you have a separate variable or even a parameter. The value of frustumSize depends on the size of your scene.