Angular Threejs scene starter

three-scene.component.pug

#rendererContainer(#rendererContainer)

three-scene.component.ts

import { Component, ViewChild, ElementRef, AfterViewInit, Renderer2, OnDestroy } from '@angular/core';
import { fromEvent, Observable, Subscription } from 'rxjs';
import { Scene, PerspectiveCamera, WebGLRenderer } from 'three';

@Component({
  selector: 'three-scene',
  templateUrl: './three-scene.component.pug',
  styleUrls: ['./three-scene.component.scss']
})
export class ThreeSceneComponent implements AfterViewInit {

  resizeObservable$: Observable<Event>
  resizeSubscription$: Subscription

  scene = new Scene()

  renderer: WebGLRenderer
  camera: PerspectiveCamera

  @ViewChild('rendererContainer') rendererContainer: ElementRef

  constructor(private ngRenderer:Renderer2){
    this.renderer = new WebGLRenderer({antialias: true})
  }

  ngAfterViewInit(){
    this.camera = new PerspectiveCamera(75, this.rendererContainer.nativeElement.clientWidth / this.rendererContainer.nativeElement.clientHeight, 0.1, 1000)
    this.ngRenderer.appendChild(this.rendererContainer.nativeElement, this.renderer.domElement)
    this.startScene();
  }

  startScene() {
    this.renderer.setClearColor('#E5E5E5')
    console.log(this.rendererContainer.nativeElement.clientWidth);
    this.renderer.setSize(this.rendererContainer.nativeElement.clientWidth, this.rendererContainer.nativeElement.clientHeight)
    this.renderer.render(this.scene, this.camera)

    this.resizeObservable$ = fromEvent(window, 'resize')
    this.resizeSubscription$ = this.resizeObservable$.subscribe( evt => {
      this.renderer.setSize(this.rendererContainer.nativeElement.clientWidth, this.rendererContainer.nativeElement.clientHeight)
      this.camera.aspect = this.rendererContainer.nativeElement.clientWidth / this.rendererContainer.nativeElement.clientHeight
      this.camera.updateProjectionMatrix();
    })
  }

  ngOnDestroy(){
    this.resizeSubscription$.unsubscribe()
  }
}