title: three.js: Cannot display obj file using THREE.OBJLoader
body: <p>I am having problems loading an obj file using the example code. I have no issue when loading the example file male02.obj however when I insert my file the object isn't displayed. I have had the same problem when using using the Python converter script and the JSONLoader. </p>
  
  <p>Here is all of the code for the OBJLoader</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;three.js webgl - loaders - OBJ loader&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
          &lt;style&gt;
              body {
                  font-family: Monospace;
                  background-color: #000;
                  color: #fff;
                  margin: 0px;
                  overflow: hidden;
              }
              #info {
                  color: #fff;
                  position: absolute;
                  top: 10px;
                  width: 100%;
                  text-align: center;
                  z-index: 100;
                  display:block;
              }
              #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="info"&gt;
          &lt;a href="http://github.com/mrdoob/three.js" target="_blank"&gt;three.js&lt;/a&gt; - OBJLoader test
          &lt;/div&gt;
  
          &lt;script src="javascripts/Three.js"&gt;&lt;/script&gt;
          &lt;script src="javascripts/OBJLoader.js"&gt;&lt;/script&gt;
  
          &lt;script src="javascripts/Detector.js"&gt;&lt;/script&gt;
          &lt;script src="javascripts/Stats.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 );
  
                  scene = new THREE.Scene();
  
                  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                  camera.position.z = 100;
                  scene.add( camera );
  
                  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 );
  
                  var loader = new THREE.OBJLoader();
          //loader.load( "img/male02.obj", function ( object ) {
          loader.load( "img/originalMeanModel.obj", function ( object ) {
                      object.position.y = - 80;
                      scene.add( object );
                  } );
  
                  // RENDERER
                  renderer = new THREE.WebGLRenderer();
                  renderer.setSize( window.innerWidth, window.innerHeight );
                  container.appendChild( renderer.domElement );
  
                  document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  
              }
  
              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;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am using the latest version of three.js (49).</p>
  
  <p>Here is a link to the obj file I am trying to load <a href="https://dl.dropbox.com/u/23384412/originalMeanModel.obj" rel="nofollow">https://dl.dropbox.com/u/23384412/originalMeanModel.obj</a></p>
  
  <p>I noticed when I was trying the JSONLoader that the exported JSON file doesn't have any normals, colors or uvs. This doesn't affect when viewing the file in Blender or MeshLab but will is have an effect with three.js?</p>
  
  <p>If anyone can help me out it would be greatly appreciated.</p>
  
  <p>Thanks in advance.  </p>