Collada file not displaying the object properly with canvas

When I use the same code for viewing the file without lights,animation and everything it works fine.Below I have attached the file that is working perfectly.

But when I add lights and other files, it does not working correctly. I cannot able to identify what is the problem with the code.Below I have attached the file added with lights and other file types.

But When I try to load same file with local software that is there any problem with the DAE file, it works perfectly. Below I will attach the screenshot how it should display

Map.ts

    import { AfterViewInit, Component, ElementRef, ViewChild, HostListener } from '@angular/core';
    import { LoadingController } from 'ionic-angular';

    import * as THREE from 'three';
    import "./../../providers/three-enabler";
    import "three/examples/js/controls/OrbitControls";
    import "three/examples/js/loaders/ColladaLoader";

    @Component({
      selector: 'map',
      templateUrl: 'map.html'
    })

    export class MapComponent implements AfterViewInit{

      private renderer: THREE.WebGLRenderer;
      private camera: THREE.PerspectiveCamera;
      public scene: THREE.Scene;

      public fieldOfView: number = 20;
      public nearClippingPane: number = 1;
      public farClippingPane: number = 1100;

      public controls: THREE.OrbitControls;


      @ViewChild('canvas')
      private canvasRef: ElementRef;

      constructor(public loadingCtrl: LoadingController) {
        
        this.render = this.render.bind(this);
        this.onModelLoadingCompleted = this.onModelLoadingCompleted.bind(this);

      }


      private get canvas(): HTMLCanvasElement {
        return this.canvasRef.nativeElement;
      }

      private createScene() {
        this.scene = new THREE.Scene();
        var loader = new THREE.ColladaLoader();
        loader.load('assets/Buildings/MITblock.DAE', this.onModelLoadingCompleted);

      }

      private onModelLoadingCompleted(collada) {
         const loading = this.loadingCtrl.create({
          content:'Loading Please Wait...'
        });
        loading.present();
       
        var modelScene = collada.scene;
        this.scene.add(modelScene);
        
        loading.dismiss();
        this.render();
      }

      private createCamera() {
        let aspectRatio = this.getAspectRatio();
        this.camera = new THREE.PerspectiveCamera(
          this.fieldOfView,
          aspectRatio,
          this.nearClippingPane,
          this.farClippingPane
        );

        // Set position and look at
        this.camera.position.x = 10;
        this.camera.position.y = 20;
        this.camera.position.z = 90;
      }

      private getAspectRatio(): number {
        let height = this.canvas.clientHeight;
        if (height === 0) {
          return 0;
        }
        this.canvas.style.width = "100%%";
        this.canvas.style.height = "100%%";
        return this.canvas.clientWidth / this.canvas.clientHeight;
      }

      private startRendering() {
        this.renderer = new THREE.WebGLRenderer({
          canvas: this.canvas,
          antialias: true
        });
        this.renderer.setPixelRatio(devicePixelRatio);
        this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);

        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        this.renderer.setClearColor(0xffffff, 1);
        this.renderer.autoClear = true;

        let component: MapComponent = this;

        (function render() {
          requestAnimationFrame(render);
          component.render();
        }());
      }

      public render() {
        
        this.renderer.render(this.scene, this.camera);
        
      }

      public addControls() {
        this.controls = new THREE.OrbitControls(this.camera);
        this.controls.rotateSpeed = 1.0;
        this.controls.zoomSpeed = 1.2;
        this.controls.addEventListener('change', this.render);

      }

      /* EVENTS */

      public onMouseDown(event: MouseEvent) {
        console.log("onMouseDown");
        event.preventDefault();

        // Example of mesh selection/pick:
        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();
        mouse.x = (event.clientX / this.renderer.domElement.clientWidth) * 2 - 1;
        mouse.y = - (event.clientY / this.renderer.domElement.clientHeight) * 2 + 1;
        raycaster.setFromCamera(mouse, this.camera);

        var obj: THREE.Object3D[] = [];
        this.findAllObjects(obj, this.scene);
        var intersects = raycaster.intersectObjects(obj);
        console.log("Scene has " + obj.length + " objects");
        console.log(intersects.length + " intersected objects found")
        intersects.forEach((i) => {
          console.log(i.object); // do what you want to do with object
        });

      }

      private findAllObjects(pred: THREE.Object3D[], parent: THREE.Object3D) {
        // NOTE: Better to keep separate array of selected objects
        if (parent.children.length > 0) {
          parent.children.forEach((i) => {
            pred.push(i);
            this.findAllObjects(pred, i);
          });
        }
      }

      public onMouseUp(event: MouseEvent) {
        console.log("onMouseUp");
      }


      @HostListener('window:resize', ['$event'])
      public onResize(event: Event) {
        

        this.canvas.style.width = "100%%";
        this.canvas.style.height = "100%%";
        console.log("onResize: " + this.canvas.clientWidth + ", " + this.canvas.clientHeight);

        this.camera.aspect = this.getAspectRatio();
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);
        this.render();

      }


      @HostListener('document:keypress', ['$event'])
      public onKeyPress(event: KeyboardEvent) {
        console.log("onKeyPress: " + event.key);
      }


      /* LIFECYCLE */
      ngAfterViewInit() {
        this.createScene();
        this.createCamera();
        this.startRendering();
        this.addControls();
      }


    }

Map.html

<canvas #canvas (mousedown)="onMouseDown($event)" (mouseup)="onMouseUp($event)"></canvas>