title: Three.js code shows nothing in scene?
body: <p>I have Created simple Example using Three.js , i have built some code with it before but it was not organized as classes ,
  The problem that nothing shown in the view after mof=defying code like this .</p>
  
  <p>HTML file</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt; &lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="scenecontainer"&gt;&lt;/div&gt;
  
  &lt;script src="../js/libs/three.js/three.js"&gt;&lt;/script&gt;
  &lt;script src="../js/libs/Detector.js"&gt;&lt;/script&gt;
  &lt;script src="../js/libs/stats.min.js"&gt;&lt;/script&gt;
  &lt;script src="../js/libs/RequestAnimationFrame.js"&gt;&lt;/script&gt;
  
  &lt;script src="../js/lab/common/CommonExperiment.js"&gt;&lt;/script&gt;
  &lt;script src="../js/lab/common/commonMain.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>var viewport;
  var commonExperiment;
  
  function main() {
      viewport = document.getElementById("scenecontainer");
      commonExperiment = new CommonExperiment(viewport);
      commonExperiment.addTestCube();
      commonExperiment.animate();
  }
  
  main();
  </code></pre>
  
  <p>CommonExperiment.js</p>
  
  <pre><code>function CommonExperiment(domElement, renderStatistics) {
      this.testMesh = undefined;
  
      this.scene = undefined;
      this.renderer = undefined;
      this.stats = undefined;
      this.camera = undefined;
      this.renderStatistics = ( renderStatistics != undefined ) ? renderStatistics : true;
      this.domElement = domElement;
  
      this.init();
  }
  
  CommonExperiment.prototype.init = function () {
      if (Detector.webgl) {
          this.renderer = new THREE.WebGLRenderer({
              antialias:true, // to get smoother output
              preserveDrawingBuffer:true
          });
      } else {
          Detector.addGetWebGLMessage();
          return;
      }
  
  
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.domElement.appendChild(this.renderer.domElement);
  
      if (this.renderStatistics) {
          this.stats = new Stats();
          this.stats.domElement.style.position = 'absolute';
          this.stats.domElement.style.bottom = '0px';
          document.body.appendChild(this.stats.domElement);
      }
  
      // create a scene
      this.scene = new THREE.Scene();
  
      // put a camera in the scene
      this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
      this.camera.position.z = 1000;
      this.scene.add(this.camera);
  
  
  
  };
  
  CommonExperiment.prototype.animate = function () {
      requestAnimationFrame(this.animate.bind(this));
  
      this.render();
  //    console.log("ahmed");
  
      if (this.stats) {
          this.stats.update();
      }
  };
  
  // just test donot use
  CommonExperiment.prototype.addTestCube = function () {
      var geometry = new THREE.CubeGeometry(200, 200, 200);
      var material = new THREE.MeshBasicMaterial({ color:0xff0000, wireframe:true });
      this.testMesh = new THREE.Mesh(geometry, material);
      this.scene.add(this.testMesh);
  };
  
  // to be overide
  CommonExperiment.prototype.render = function () {
      this.testMesh.rotation.x += 0.01;
      this.testMesh.rotation.y += 0.02;
  };
  </code></pre>
  
  <p>any help?
  ill appreciate it :) .</p>