title: Three.js material isn't applied correctly to hexagonal faces
body: <p>I have a mesh, created in blender and exported to .obj. The mesh looks valid and has UV map applied and exported into the same .obj as well. For some reason, when I try to apply a texture material, or even basic material to the mesh, only half of the hexagon is actually painted.</p>
  
  <p>This is a mesh</p>
  
  <p><img src="https://i.stack.imgur.com/EIq1T.png" alt="enter image description here"></p>
  
  <p>This is the code</p>
  
  <pre><code>        var container;
          var camera, scene, renderer;
  
          init();
          animate();
  
          function init() {
  
              container = document.createElement( 'div' );
              document.body.appendChild( container );
  
              renderer = new THREE.WebGLRenderer();
              renderer.setSize( window.innerWidth, window.innerHeight );
              container.appendChild( renderer.domElement );
  
              scene = new THREE.Scene();
  
              camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.5, 3000000 );
              camera.position.set( 2000, 750, 2000 );
  
              controls = new THREE.OrbitControls( camera, renderer.domElement );
              controls.userPan = false;
              controls.userPanSpeed = 0.0;
              controls.maxDistance = 5000.0;
              controls.maxPolarAngle = Math.PI * 0.495;
              controls.center.set( 0, 1, 0 );
  
              var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
              light.position.set( - 1, 1, - 1 );
              scene.add( light );
  
  
              waterNormals = new THREE.ImageUtils.loadTexture( 'textures/waternormals.jpg' );
              waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping; 
  
              water = new THREE.Water( renderer, camera, scene, {
                  textureWidth: 512, 
                  textureHeight: 512,
                  waterNormals: waterNormals,
                  alpha:  1.0,
                  sunDirection: light.position.clone().normalize(),
                  sunColor: 0xffffff,
                  waterColor: 0x001e0f,
                  distortionScale: 50.0,
              } );
  
  
              var loader = new THREE.OBJMTLLoader();
              loader.load( "models/world.obj", "models/world.mtl", function(object)
              {
                  console.log(object.children[0].children[1].geometry);
                  var mesh = new THREE.Mesh(
                      object.children[0].children[1].geometry,
                      new THREE.MeshBasicMaterial
                  );                    
  
                  scene.add(mesh);
              });
          }
  
          function animate() {
  
              requestAnimationFrame( animate );
              render();
  
          }
  
          function render() {
  
              controls.update();
              renderer.render( scene, camera );
  
          }
  </code></pre>
  
  <p>And this is how it looks:</p>
  
  <p><img src="https://i.stack.imgur.com/93QLP.png" alt="enter image description here"></p>
  
  <p>When I split the hexagons into 2 quads it works perfectly, thing is, I need faces to stay hexagons for picking, the faces I want to be selected are hexagons.</p>