title: Rhino obj to Three.js visualisation problems
body: <p>While testing the import/export between Rhino and Three, I have encountered some problems while visualising a fairly complicated obj file. I exported the obj from Rhino after triangulating the Mesh. </p>
  
  <p>The problem shows indipendently from the material: with no material, with a material or/and with a texture applied within Three.</p>
  
  <p>Jpeg of the geometry I try to import from Rhino vs the result on Three.js: <a href="http://goo.gl/1WMGSu" rel="nofollow">http://goo.gl/1WMGSu</a></p>
  
  <p>As you can see, there are some weird depth problems, especially depending on the camera position.
  I made a long research on the topic without finding a solution. I'll append some other topics on StackOverflow that I already have followed.</p>
  
  <p>On my own, I tried also to check and flip the normals within Rhino, with no success.</p>
  
  <p>My script (updated with Gaitat advice):</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://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&gt;
  
              var container;
  
              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( 55, window.innerWidth / window.innerHeight, 1, 2500 );
                  camera.position.z = 50;
  
                  // 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 );
                  scene.add( directionalLight );
  
                  // texture
  
                  var manager = new THREE.LoadingManager();
                  manager.onProgress = function ( item, loaded, total ) {
  
                      console.log( item, loaded, total );
  
                  };
  
                  var texture = new THREE.Texture();
  
                  var onProgress = function ( xhr ) {
                      if ( xhr.lengthComputable ) {
                          var percentComplete = xhr.loaded / xhr.total * 100;
                          console.log( Math.round(percentComplete, 2) + '% downloaded' );
                      }
                  };
  
                  var onError = function ( xhr ) {
                  };
  
  
                  var loader = new THREE.ImageLoader( manager );
                  loader.load( 'textures/UV_Grid_Sm.jpg', function ( image ) {
  
                      texture.image = image;
                      texture.needsUpdate = true;
  
                  } );
  
                  // model
  
                  loader = new THREE.OBJLoader( manager );
                  loader.load( 'obj/RU_obj/testTriangulated_again.obj', function ( object ) {
  
                      object.traverse( function ( child ) {
  
                          if ( child instanceof THREE.Mesh ) {
  
                              child.material.map = texture;
  
                          }
  
                      } );
  
                      object.position.y = - 30;
                      object.scale.x = 0.5;
                      object.scale.y = 0.5;
                      object.scale.z = 0.5;
  
                      scene.add( object );
  
                  }, onProgress, onError );
  
                  //
  
                  renderer = new THREE.WebGLRenderer();
                  renderer.setPixelRatio( window.devicePixelRatio );
                  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;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here it is my obj file: <a href="http://goo.gl/hTD43D" rel="nofollow">http://goo.gl/hTD43D</a>.</p>
  
  <p>Thanks in advance.</p>