title: [three.js]THREE.Geometry : can't apply textured material
body: <p>I created a hexagon with THREE.JS, it works with a basic material with a color, but i can't make it works with a texture... When i set up a textured material, the object isn't rendered at all.</p>
  
  <p>I had the same problem with a bufferGeometry, but i solved the issue by setting <code>geometry.addAttribute('uv'...</code>, but this time, looks like it's not a uvs issue.</p>
  
  <p>Here's the JS code :</p>
  
  <pre><code>var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  
  // Adding light 
  scene.add( new THREE.AmbientLight( 0x444444 ) );
  // SPOT LIGHT
  var pXL1 = 3; var pYL1 = 1; var pZL1 = 2;
  var LightGeometry1 = new THREE.BoxGeometry( 0.1, 0.1, 0.1 );
  var LightMaterial1 = new THREE.MeshBasicMaterial( { map: new THREE.ImageUtils.loadTexture( "textures/default.jpg" ) } ); // this one is well textured !!!!
  var LightCube1 = new THREE.Mesh( LightGeometry1, LightMaterial1 );
  LightCube1.position.set(pXL1, pYL1, pZL1);
  scene.add( LightCube1 );
  var light1 = new THREE.DirectionalLight( 0xffffff );
  light1.position.set( pXL1, pYL1, pZL1 ).normalize();
  scene.add(light1);
  
  var geometry = new THREE.Geometry();
  
  geometry.vertices.push(new THREE.Vector3(-0.866 , 0.5,1));
  geometry.vertices.push(new THREE.Vector3(-0.866 , -0.5 ,1));
  geometry.vertices.push(new THREE.Vector3(0, -1 ,1));
  geometry.vertices.push(new THREE.Vector3(0.866, -0.5 ,1));
  geometry.vertices.push(new THREE.Vector3(0.866,0.5 ,1));
  geometry.vertices.push(new THREE.Vector3(0, 1 ,1));
  
  geometry.faces.push(new THREE.Face3(1, 2, 3, new THREE.Vector3(0, 0, 1)));
  geometry.faces.push(new THREE.Face3(1, 3, 4, new THREE.Vector3(0, 0, 1)));
  geometry.faces.push(new THREE.Face3(4, 0, 1, new THREE.Vector3(0, 0, 1)));
  geometry.faces.push(new THREE.Face3(4, 5, 0, new THREE.Vector3(0, 0, 1)));
  
  geometry.faceVertexUvs[0] = [];
  
  geometry.faceVertexUvs[0].push( THREE.Vector2(0,5),  THREE.Vector2(0.933,0.2835),  THREE.Vector2(0.933,0.7165));
  geometry.faceVertexUvs[0].push( THREE.Vector2(0,5),  THREE.Vector2(0.933,0.7165),  THREE.Vector2(0.5,1));
  geometry.faceVertexUvs[0].push( THREE.Vector2(0.5,1),  THREE.Vector2(0.067,0.2835),  THREE.Vector2(0,5));
  geometry.faceVertexUvs[0].push( THREE.Vector2(0.5,1),  THREE.Vector2(0.067,7165),  THREE.Vector2(0.067,0.2835));
  
  var hexagon_texture = new THREE.ImageUtils.loadTexture( "textures/default.jpg" );
      hexagon_texture.wrapS = THREE.RepeatWrapping;
      hexagon_texture.wrapT = THREE.RepeatWrapping;
      hexagon_texture.repeat.set(1,1);
  
  var hexagon_material = new THREE.MeshBasicMaterial( { color: 0xff0000} );
  //var hexagon_material = new THREE.MeshPhongMaterial( { ambient: 0xffffff, specular: 0x555555, shininess: 50, map:hexagon_texture, side: THREE.DoubleSide } );
  //var hexagon_material = new THREE.MeshBasicMaterial( { map: new THREE.ImageUtils.loadTexture( "textures/default.jpg" ) } );
  
  var hexagon = new THREE.Mesh( geometry,hexagon_material );
  
  scene.add(hexagon);
  
  
  camera.position.z = 5;
  controls = new THREE.OrbitControls( camera, renderer.domElement );  
  
  var render = function () {
      requestAnimationFrame( render );
      renderer.render(scene, camera);
  };
  
  render();
  </code></pre>
  
  <p>As it, it works and i have a red hexagon. But if i uncomment one of the <code>var hexagon_materual = ...</code>, then the hexagon isn't rendered.</p>
  
  <p>What am i missing ?</p>
  
  <p>Thank you</p>