My current project utilizes an Orthographic camera and MapControls, rendering the scene correctly.
However, I'm facing an issue where the camera cuts the render scene in half:
https://i.sstatic.net/Fz208.png
The initialization of my orthographic camera is as follows:
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);
}
In addition, I've created Map controls like this:
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;
}
}
Combining everything together looks like this:
this.camera = new OrthoCamera(renderingContext);
this.controls = new Controls(this.camera, renderingContext);