3. JS: модель ObjLoader не отображается должным образом

Question

Я пытаюсь импортировать модель с помощью objloader в три js в angular приложении. Когда я пытаюсь загрузить объект с помощью objloader в трех js, объект выглядит потревоженным после загрузки. Когда я поворачиваю модель, модель мешает, пока меня sh удаляют и создают и накладываются друг на друга, что не дает приятного обзора для просмотра модели в средстве просмотра.

  export class ApplicationViewerComponent {
  @ViewChild('rendererContainer') rendererContainer: ElementRef;
  renderer = new THREE.WebGLRenderer({ antialias: true });
  scene = null;
  camera = null;
  mesh = null;
  geometry = null;
  material = null;
  controls = null;

  constructor() {
    const that = this;
    var object;
    that.scene = new THREE.Scene();
    that.scene.background = new THREE.Color(0xffffff);
    that.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.00001, 100000);
    that.camera.position.z = 20;

    // that.geometry = new THREE.BoxGeometry(200, 200, 200);
    // that.material = new THREE.MeshBasicMaterial({ color: 'red', wireframe: true });
    // that.mesh = new THREE.Mesh(that.geometry, that.material)
    that.controls = new OrbitControls(that.camera, that.renderer.domElement);

    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0.5, 0.5, 0.5);
    that.scene.add(light);

    var light1 = new THREE.DirectionalLight(0xcacaca);
    light1.position.set(-0.5, -0.5, -0.5);
    that.scene.add(light1);

    var light2 = new THREE.AmbientLight(0x222222);
    that.scene.add(light2);

    // that.scene.add(that.mesh);

    var loader = new OBJLoader(manager);

    loader.load('assets/Object/rac_basic_sample_project-2.obj', function (obj) {
      object = obj;
      that.scene.add(object);
    }, onProgress, onError);

    const loadModel = () => {
      console.log('hitting')
      object.traverse(function (child) {
        // if (child.isMesh) child.material.map = texture;
      });

      object.rotation.y = 0.9;
      var center = new THREE.Vector3(0, 0, 0);
      let box = new THREE.Box3().setFromObject(object)
      // let sphere = box.getBoundingSphere()
      // let centerPoint = sphere.center
      // that.camera.lookAt(centerPoint)
      that.controls.target.set(0, 0, 0);
      // object.position.z = -25
      that.scene.add(object);

      object.children.forEach(item => {

        that.controls.attach(item);

      });
      that.scene.add(that.controls);
      that.controls.setMode('rotate');

      // that.controls.position.x = 10;
      // that.controls.position.z = 15;
    }

    var manager = new THREE.LoadingManager(loadModel);

    manager.onProgress = function (item, loaded, total) {

      console.log(item, loaded, total);

    };


    function onProgress(xhr) {

      if (xhr.lengthComputable) {

        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log('model ' + Math.round(percentComplete) + '% downloaded');

      }

    }

    function onError(xhr) {
      console.log('error');
    }


  }
  ngAfterViewInit() {
    const that = this;
    that.renderer.setSize(window.innerWidth, window.innerHeight);
    that.rendererContainer.nativeElement.appendChild(that.renderer.domElement);
    // $('div canvas').css('height', '870px', ' !important');
    that.animate();
  }

  animate() {
    const that = this;
    window.requestAnimationFrame(() => that.animate());
    // console.log(that.mesh)
    // that.mesh.rotation.x += 0.01;
    // that.mesh.rotation.y += 0.01;
    that.renderer.render(that.scene, that.camera);
  }

  // ngOnInit(): void {
  // }

  @HostListener('window:resize', ['$event']) onWindowResize(event) {
    const that = this;
    console.log('triggered')
    that.renderer.setSize(event.target.innerWidth, event.target.innerHeight);
  }

}

введите описание изображения здесь