title: Why my scene is black until OrbitControl is called in ThreeJS?
body: <p>Why do I need to click and move the cursor a little before I can see the scene in ThreeJS?</p>
  
  <p>So, the page is completely black, but once I click and move, everything appears, I can't find the problem. A little help would be nice :)</p>
  
  <pre><code>    var origWidth = 1280;
      var origHeight = 720;
      //TODO WindowResize looks wierd, implement it properly
      //var width = window.innerWidth;
      //var height = window.innerHeight;
      var width = origWidth;
      var height = origHeight;
  
      var Top = origHeight/2;
      var Bottom = -origHeight/2;
      var Left = -origWidth/2;
      var Right = origWidth/2;
  
  
      var renderer = null;
      var scene = null;
      var camera = null;
      var Textures = {};
  
          //Set the renderer engine
          renderer = new THREE.WebGLRenderer({ antialias: true });
          renderer.setSize(width, height);
          document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
          renderer.shadowMapEnabled = true;
          renderer.shadowMapSoft = true;
  
  
  
          //Setup the Scene!
          scene = new THREE.Scene;
  
          //Camera
          camera = new THREE.PerspectiveCamera(45, origWidth / origHeight, 0.1, 10000);
          camera.position = new THREE.Vector3(0,-80,800);
  
          scene.add(camera);
          camera.lookAt(scene);
          //TODO WindowResize looks wierd, implement it properly
          //var windowResize = THREEx.WindowResize(renderer, camera);
  
  
  
          //Light
          var pointLight = new THREE.PointLight(0xffffff);
          pointLight.position.set(0, 0, 900);
          scene.add(pointLight);
  
  
  
          //Debug
          controlsObj = new THREE.OrbitControls(camera);
          controlsObj.addEventListener('change', render);
          axes = new THREE.AxisHelper( origWidth );
          scene.add( axes );
  
          /*var size = 10;
          var step = 1;
          var gridHelper = new THREE.GridHelper( size, step );
  
          gridHelper.position = new THREE.Vector3( 10, 10, 0 );
          gridHelper.rotation = new THREE.Euler( 45, 0, 0 );
  
          scene.add( gridHelper );*/
  
          var pointLightHelper = new THREE.PointLightHelper( pointLight, 10 );
          scene.add( pointLightHelper );
  
          //Add playing field
          tablegeometry = new THREE.BoxGeometry(origWidth, origHeight, 40);
          tablematerial = new THREE.MeshLambertMaterial({ color: 0xffff00, map: Textures.bg, side: THREE.DoubleSide });
          tableobj = new THREE.Mesh(tablegeometry, tablematerial);
          tableobj.position.set(0,0,-20); //TODO vec
          scene.add(tableobj);
  
          //ANNNND, Action !
          render();
  
      function render() {
          console.log("render");
          renderer.render(scene, camera);
      }
  </code></pre>