title: three.js hello world example: canvas doesn't render
body: <p>I am trying to make this hello world example run on my own computer: <a href="http://jsfiddle.net/GKCx6/" rel="nofollow">http://jsfiddle.net/GKCx6/</a></p>
  
  <p>I have made my efforts so far available here: <a href="https://dl.dropbox.com/u/2070405/wtf/index.html" rel="nofollow">https://dl.dropbox.com/u/2070405/wtf/index.html</a></p>
  
  <p>Everything seems to work fine, except for the fact that nothing renders. How do I approach debugging this? I have used firebug so far.</p>
  
  <p>This is the content of index.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;learningthree.js boiler plate for three.js&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
      &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- three.js container --&gt;
          &lt;div id="container"&gt;&lt;/div&gt;
      &lt;!-- info on screen display --&gt;
  
  &lt;/body&gt;
  &lt;script src="three.js"&gt;&lt;/script&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the content of main.js:</p>
  
  <pre><code>// RequestAnimationFrame.js:
  if ( !window.requestAnimationFrame ) {
  
      window.requestAnimationFrame = ( function() {
  
          return window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function( callback, element ) {
  
              window.setTimeout( callback, 1000 / 60 );
  
          };
  
      } )();
  
  }
  
  
  // Hello World1 from https://github.com/mrdoob/three.js
  
  var camera, scene, renderer,
      geometry, material, mesh;
  
  init();
  //console.log("renderer defined? ", renderer);
  animate();
  
  function init() {
  
      camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
      camera.position.z = 1000;
  
      console.log("THREE.Scene available? ", THREE.Scene);
      scene = new THREE.Scene();
      console.log("scene created? ", scene);
  
      geometry = new THREE.CubeGeometry( 200, 200, 200 );
      material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
  
      mesh = new THREE.Mesh( geometry, material );
      scene.add( mesh );
  
      renderer = new THREE.CanvasRenderer();
      renderer.setSize( 800, 600 );
      //renderer.setSize( window.innerWidth, window.innerHeight );
  
      container = document.getElementById("container");
      container.appendChild(renderer.domElement);
  
      }
  
      function animate() {
  
          // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
          requestAnimationFrame( animate );
          console.log("animate in action");
          render();
  
      }
  
      function render() {
  
          mesh.rotation.x += 0.01;
          mesh.rotation.y += 0.02;
          console.log("renderer in action");
          renderer.render( scene, camera );
  
      }
  </code></pre>