title: Three js in a class
body: <p>I tried to set all the necessary functionality into one class in order to create a simple three.js scene with a cube. I don't get any errors, but the scene stays black when I open it in the browser.
  Here is my code:</p>
  
  <pre><code>class SceneInit {
  
      constructor(fov = 45,camera,scene,controls,renderer)
      {
          this.camera = camera;
          this.scene = scene;
          this.controls = controls;
          this.renderer = renderer;
          this.fov = fov;
  
      }
  
  
  
      initScene() {
          this.camera = new THREE.PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 1, 1000);
          this.camera.position.z = 15;
  
          this.controls = new THREE.TrackballControls( this.camera );
          //this.controls.addEventListener('change', this.renderScene);
  
          this.scene = new THREE.Scene();
  
          //specify a canvas which is already created in the HTML file and tagged by an id        //aliasing enabled
          this.renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myThreeJsCanvas') , antialias: true});
          this.renderer.setSize(window.innerWidth, window.innerHeight);
          document.body.appendChild(this.renderer.domElement);
  
  
          //ambient light which is for the whole scene
          let ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
          ambientLight.castShadow = false;
          this.scene.add(ambientLight);
  
          //spot light which is illuminating the chart directly
          let spotLight = new THREE.SpotLight(0xffffff, 0.55);
          spotLight.castShadow = true;
          spotLight.position.set(0,40,10);
          this.scene.add(spotLight);
  
  
          //if window resizes
          window.addEventListener('resize', this.onWindowResize, false);
      }
  
  
      animate(){
          requestAnimationFrame( this.animate.bind(this) );
          this.render();
          this.controls.update();
      }
  
  
      render(){
          this.renderer.render( this.scene, this.camera );
      }
  
  
      onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize( window.innerWidth, window.innerHeight );
  }
  
  }
  </code></pre>
  
  <p>And then I try to instantiate a new object and add an object to the scene. When I try to print the children of the scene, it returns me the right objects, but as I mentioned before the scene stays black. Only the renderer window is getting drawed in the browser.</p>
  
  <pre><code>let test = new SceneInit(45);
  test.initScene();
  test.animate();
  
  
  let geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
  let material = new THREE.MeshBasicMaterial();
  let mesh = new THREE.Mesh( geometry, material );
  
  test.scene.add(mesh);
  console.log(test.scene.children); //returns 3 objects (ambientLight, spotLight, mesh)
  </code></pre>