在中创建建筑三.js但在现场什么也没显示

我正在使用三.js用角度来创建一个建筑。

Html格式

   <div style="width: 100vw; height:500px; " #sceneContainer></div>

组件

import { Component,ViewChild,ElementRef,AfterViewInit,OnDestroy } from '@angular/core';
import * as THREE from 'three';
import { OrbitControls } from 'three-orbitcontrols-ts';

export class TestComponent  implements AfterViewInit,OnDestroy{


  @ViewChild('sceneContainer') sceneContainer: ElementRef;

  scene: THREE.Scene;
  renderer: THREE.WebGLRenderer;
  camera: THREE.PerspectiveCamera;
  controls: OrbitControls;
  // lights
  directional: THREE.DirectionalLight;
  private m_canvas: HTMLCanvasElement;

    option = {
  buildingX : 509,
  buildingY : 50,
  buildingZ : 500,
  pliesTotal : 6,
  rendererBackground : 0xffffff, 
  buildingColor : 0x0066ff, 
  groundColor : 0x00ff66,  
  roomGroundColor : 0xa0adaf,   
      elevation : 0,   
      wallHeight : 20,    
      wallWidth : 0,     
      wallColor : 0xa0adaf     
    }


    ngOnDestroy() {

      this.controls.dispose();
      this.renderer.dispose();
    }

    ngAfterViewInit() {
      this.setup();
    }

     animate(){

      requestAnimationFrame(this.animate.bind(this));
      this.controls.update();
      this.renderer.render(this.scene, this.camera);

    }
        setup() {
      this.scene = new THREE.Scene();
      this.renderer = new THREE.WebGLRenderer({
                                                alpha: true,
                                                antialias: true,
                                                //canvas: this.m_canvas
                                              });
      this.renderer.setClearColor(0xffffff, 0.1);
      this.renderer.shadowMap.enabled = true;
      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      console.log('offsetWidth',this.sceneContainer.nativeElement.offsetWidth,this.sceneContainer.nativeElement.offsetHeight);
      this.renderer.setSize(this.sceneContainer.nativeElement.offsetWidth, this.sceneContainer.nativeElement.offsetHeight);

      this.sceneContainer.nativeElement.appendChild(this.renderer.domElement);

      this.camera = new THREE.PerspectiveCamera(40, this.sceneContainer.nativeElement.offsetWidth / this.sceneContainer.nativeElement.offsetHeight, 0.5, 10000);
      //this.camera.position.z = 5;
      this.camera.fov = 60;
      this.camera.position.set(0, 0, 300)
      //this.camera.lookAt(new THREE.Vector3(0, 0, 0));

      // controls
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enabled = true;
      this.controls.autoRotate = true
      this.controls.maxDistance = 1500;
      this.controls.minDistance = 0;
      this.controls.autoRotateSpeed = 0.5;
      this.controls.autoRotate = false;

      // lights
      this.directional = new THREE.DirectionalLight(0xFFFFFF, 1);
      this.directional.position.set(10, 20, 1);
      this.directional.target.position.set(0, 0, 0);

      this.scene.add(this.directional);

      // ambient
      let ambient = new THREE.AmbientLight(0xffffff, 0.1);
      this.scene.add(ambient);

      this.createScene2();

      this.animate();
    }

    createScene2(){
      const groundGeometry = new THREE.BoxGeometry(1000,1,1000);
      const groundMaterial = new THREE.MeshLambertMaterial({
          color: this.option.groundColor,
          transparent : false, 
          opacity :0.5, 
          wireframe: false
      })
      const ground = new THREE.Mesh(groundGeometry, groundMaterial);
      ground.position.set(0,  - this.option.buildingY/2, 0);
      this.scene.add(ground);
      for (var i = 0;i < this.option.pliesTotal; i++) {
          this.addRoom(i);
      }

    }

    addRoom (n) {
        const roomGeometry = new THREE.BoxGeometry(this.option.buildingX,this.option.buildingY,this.option.buildingZ)
        const roomMaterial = new THREE.MeshLambertMaterial({
            color: this.option.roomGroundColor,
            transparent : true, 
            opacity :0.4, 
            wireframe: false 
        })
    }

}

我希望看到这样的模特,