Use Angular in Three.js

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import {FileService} from '../../_services/file.service';
import { forkJoin } from 'rxjs';
////////////


//import * as THREE from 'three';
declare var $: any;
declare const THREE: any;
declare const AxisSystem: any;
declare const Detector: any;
declare const jsonFileNames: any;
declare const boundingBoxMinimum: any;
declare const boundingBoxMaximum: any;
declare const numberOfJSONFiles: any;

const uri = 'http://localhost:8080/file/upload';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {
  mouseVector = THREE.Vector3;
  scene;
  camera;
	controls;
	container;
	geometryArray;
	objectNameLabel;
  containerWidth;
  containerHeight;
  renderer = null;
  //axisSystem;
  projector ;
  httpService: any;
  user: any;


  constructor(public dialog: MatDialog, public uploadService: FileService) {
    this.initializeScene();
    this.animateScene();
  }
  ngOnInit(): void {

  }

  public openUploadDialog() {
    let dialogRef = this.dialog.open(UploadDialogComponent, { width: '50%', height: '50%' });
  }
 }


    initializeScene(){
      if(!Detector.webgl){ //?????????? ???? ?? ???????????? webgl
        Detector.addGetWebGLMessage();
        return;
      }
     this.container = document.getElementById("webglcanvas");
     this.containerWidth = window.innerWidth;
     this.containerHeight = window.innerHeight;
      console.log(this.containerWidth);

      this.renderer = new THREE.WebGLRenderer({animate:true,alpha:true});
      this.renderer.setSize(this.containerWidth,this.containerHeight);
      document.body.appendChild(this.renderer.domElement);

    //  Add object picking
    this.projector = new THREE.Raycaster();
    this.mouseVector = new THREE.Vector3();
     window.addEventListener("mousemove", this.onMouseMove, false);
     window.addEventListener("resize", this.onWindowResize, false);
     this.objectNameLabel = document.getElementById("objectname");

      this.scene = new THREE.Scene();

      this.camera = new THREE.PerspectiveCamera(45,  this.containerWidth/this.containerHeight, 1, 1000);
      this.camera.position.set(0, 0, 6);
      this.camera.lookAt(this.scene.position);
      this.scene.add(this.camera);

      this.controls = new THREE.TrackballControls(this.camera, this.renderer.domElement);

    // this.axisSystem = new AxisSystem(this.camera, this.controls);


     var scaleFactor = this.calculateScaleFactor(boundingBoxMinimum, boundingBoxMaximum);

     var scope = this;
     this.geometryArray = new Object();
     var manager = new THREE.LoadingManager();
     var loader = new THREE.JSONLoader(manager);     
     for(var jsonFileName in jsonFileNames){
       var layerName = jsonFileNames[jsonFileName];
       this.httpService.getData().subscribe((data) => data);
       loader.load( layerName,  jsonFileName, function(geometry, materials, layerName){
       var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({vertexColors: THREE.VertexColors, side:THREE.DoubleSide}));
        mesh.scale.set(scaleFactor, scaleFactor, scaleFactor);
        mesh.name = layerName;

        this.scene.add(mesh);
        this.geometryArray[layerName] = mesh;

        // After the last model has been added to the scene, re-fit it
        if((this.scene.children.length - 1) == numberOfJSONFiles){
         this.fitAll(this.scene);
        }
       }, layerName);
     }

    var  pointLight = new THREE.PointLight(0xffffff, 1.0);
      pointLight.position.copy(this.camera.position);
      this.camera.add(pointLight);
    }

    fitAll(node){
      // Calculate bounding box of the whole scene
      var boundingBoxOfNode = new THREE.Box3().setFromObject(node);

      // Refocus camera the center of the given object
      var centerOfGravity = boundingBoxOfNode.center();
      var newCameraPosition = new THREE.Vector3();
      newCameraPosition.subVectors(centerOfGravity, this.controls.target);
      this.camera.position.addVectors(this.camera.position, newCameraPosition);
      this.camera.lookAt(centerOfGravity);
      this.controls.target.set(centerOfGravity.x, centerOfGravity.y, centerOfGravity.z);

      // Move camera along z until the object fits into the screen
      var sphereSize = boundingBoxOfNode.size().length() * 0.5;
      var distToCenter = sphereSize / Math.sin(Math.PI / 180.0 * this.camera.fov * 0.5);
      var target = this.controls.target;
      var vec = new THREE.Vector3();
      vec.subVectors(this.camera.position, target);
      vec.setLength(distToCenter);
      this.camera.position.addVectors(vec , target);
    }

    calculateScaleFactor(boundingBoxMinimum, boundingBoxMaximum){
      // Get bounding box size
      var bBoxSize = [(boundingBoxMaximum[0] - boundingBoxMinimum[0]), (boundingBoxMaximum[1] - boundingBoxMinimum[1]), (boundingBoxMaximum[2] - boundingBoxMinimum[2])];

      // Detect largest dimension
      var largestSize = bBoxSize[0];
      if(bBoxSize[1] > largestSize){
        largestSize = bBoxSize[1];
      }
      if(bBoxSize[2] > largestSize){
        largestSize = bBoxSize[2];
      }

      // Scale dimension to 100
      return 100.0 / largestSize;
    }

    onWindowResize(resizeEvent){
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
    }

    onMouseMove(mouseEvent){

      this.mouseVector.x = 2 * (mouseEvent.clientX / window.innerWidth) - 1;
      this.mouseVector.y = 1 - 2 * (mouseEvent.clientY / window.innerHeight);
      var raycaster = this.projector.pickingRay(this.mouseVector.clone(), this.camera);
      var intersects = raycaster.intersectObjects(this.scene.children);
      var visibleObjectFound = 0;
      if(intersects.length > 0){
        for(var i = 0; i < intersects.length; i++){
          var object = intersects[i].object;
          if(object.visible){
            this.objectNameLabel.innerHTML = "Tree node: " + object.name;
            visibleObjectFound = 1;
            break;
          }
        }
      }
      if(!visibleObjectFound){
        this.objectNameLabel.innerHTML = "";
      }
    }

    animateScene(){
     this.controls.update();
     this.axisSystem.animate();
     requestAnimationFrame(this.animateScene);
     this.renderScene();
    }

    renderScene(){
      this.renderer.render(this.scene, this.camera);
    //  AxisSystem.render();
    }

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    camera.position.z = 5;

    var animate = function () {
      requestAnimationFrame( animate );

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render( scene, camera );
    };

    animate();


 }