ThreeJs after mouse movement some parts of the object being missed and perspective

so I am new to ThreeJs ans was trying to make a 3D cabinet model which could be 360 degree showed by mouse movement. But when I was using mouse to adjust the view, some part of the model just missed and being perspective which is not what I want... Hope someone could figure out what's wrong with my setting...

This is the model from the front view, which is what I want front view

And if I change the view, it’s being perspective after change the view

the scene just very simple scene

    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0xffffff);

and the light

    let point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); 
    this.scene.add(point); 

here is the camera setting

    const k = this.width / this.height; 
    const s = 1500; 
    this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1500);
    this.camera.position.set(-s * k, (-s * k) / 4, (-s * k) / 2); 
    this.camera.lookAt(this.scene.position);
    this.camera.updateProjectionMatrix();

render

  initRender() {
    this.renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("mainCanvas") });
    this.renderer.setClearColor("white", 1); 
  }

controls

  initControls() {
    let controls;
    controls = new OrbitControls(this.camera, this.renderer.domElement);
    controls.enableDamping = true;
    controls.enableZoom = true;
    controls.autoRotate = true;
    controls.minDistance = 400;
    controls.maxDistance = 400;
    controls.enablePan = true;
  }

and the animate

  animate() {
    this.renderer.render(this.scene, this.camera);
    requestAnimationFrame(this.animate);
  }
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum