title: Rendering obj files with three.js, nothing shows up?
body: <p>I am trying to render a .obj using three.js and i have looked at a couple of examples and figured how to do it but my html code doesn't seem to work! All i see is a black screen. I have attached the code below, what am i doing wrong?. I am a total noob at this so any help would be appreciated. Thanks!</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="info"&gt;
      &lt;a href="http://threejs.org" target="_blank"&gt;three.js&lt;/a&gt; - OBJLoader test
      &lt;/div&gt;
  
      &lt;script src="../build/three.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/loaders/OBJLoader.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/Detector.js"&gt;&lt;/script&gt;
      &lt;script src="js/libs/stats.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
          var container, stats;
  
          var camera, scene, renderer;
  
          var mouseX = 0, mouseY = 0;
  
          var windowHalfX = window.innerWidth / 2;
          var windowHalfY = window.innerHeight / 2;
  
  
          init();
          animate();
  
  
          function init() {
  
              container = document.createElement( 'div' );
              document.body.appendChild( container );
  
              camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
              camera.position.z = 100;
  
              // scene
  
              scene = new THREE.Scene();
  
              var ambient = new THREE.AmbientLight( 0x101030 );
              scene.add( ambient );
  
              var directionalLight = new THREE.DirectionalLight( 0xffeedd );
              directionalLight.position.set( 0, 0, 1 ).normalize();
              scene.add( directionalLight );
  
  
              // model
  
              var loader = new THREE.OBJLoader();
              loader.load( "/obj/smiley.obj", function ( object ) {
              scene.add( object );
              } );
  
              //
  
              renderer = new THREE.WebGLRenderer();
              renderer.setSize( window.innerWidth, window.innerHeight );
              container.appendChild( renderer.domElement );
  
              document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  
              //
  
              window.addEventListener( 'resize', onWindowResize, false );
  
          }
  
          function onWindowResize() {
  
              windowHalfX = window.innerWidth / 2;
              windowHalfY = window.innerHeight / 2;
  
              camera.aspect = window.innerWidth / window.innerHeight;
              camera.updateProjectionMatrix();
  
              renderer.setSize( window.innerWidth, window.innerHeight );
  
          }
  
          function onDocumentMouseMove( event ) {
  
              mouseX = ( event.clientX - windowHalfX ) / 2;
              mouseY = ( event.clientY - windowHalfY ) / 2;
  
          }
  
          //
  
          function animate() {
  
              requestAnimationFrame( animate );
              render();
  
          }
  
          function render() {
  
              camera.position.x += ( mouseX - camera.position.x ) * .05;
              camera.position.y += ( - mouseY - camera.position.y ) * .05;
  
              camera.lookAt( scene.position );
  
              renderer.render( scene, camera );
  
          }
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>