title: THREE.JS UV Mapping on ExtrudeGeometry
body: <p>I need to apply a texture on a ExtrudeGeometry object.</p>
  
  <p>The shape is a circle and the extrude path is composed of 2 vectors :</p>
  
  <ul>
  <li>One for the top.</li>
  <li>One for the bottom. </li>
  </ul>
  
  <p>I didn't choose cylinderGeometry because I need to place top/bottom sections of my geometry at precise positions and because the geometry created will not be always purely vertical (like a oblique cylinder for example).</p>
  
  <p>Here is a picture of a section (one top vector, one bottom vector and a shape extruded between these 2 vectors).</p>
  
  <p><img src="https://i.imgur.com/lqdvllk.png" alt="section"></p>
  
  <p>and a picture of the texture I'm trying to apply.</p>
  
  <p><img src="https://i.imgur.com/CslEXIS.jpg" alt="section"></p>
  
  <p>All I want to do is to wrap this picture on the vertical sides of my object just one time.</p>
  
  <p>Here is my code :</p>
  
  <pre><code>var biVectors = [ new THREE.Vector3( this.startVector.x, this.startVector.y, this.startVector.z ) , new THREE.Vector3( this.endVector.x, this.endVector.y, this.endVector.z ) ];
      var wellSpline = new THREE.SplineCurve3(biVectors);
      var extrudeSettings = {
          steps : 1,
          material: 0,
          extrudeMaterial: 1,
          extrudePath : wellSpline
      };
  
      var pts = [];
      for (var i = 0; i &lt;= this.segments; i++) {
          var theta = (i / this.segments) * Math.PI * 2;
          pts.push( new THREE.Vector3(Math.cos(theta) * this.diameter , Math.sin(theta) * this.diameter, 0) );            
      }
      var shape = new THREE.Shape( pts );
      var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
  
      var texture = THREE.ImageUtils.loadTexture( 'textures/sampleTexture2.jpg' );
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      texture.flipY = false;
  
      var material = new THREE.MeshBasicMaterial( { map: texture } );
  
      var slice = new THREE.Mesh( geometry, material );
      var faceNormals   = new THREE.FaceNormalsHelper( slice );
      console.log("face normals: ", faceNormals);
      myCanvas.scene.add( faceNormals );
      slice.parentObject = this;
      myCanvas.scene.add( slice );
      this.object3D = slice;
  }
  </code></pre>
  
  <p>Now, as you can see, the mapping is not correct at all.</p>
  
  <p>I've read a lot of information about this problem the last 3 days. But I'm running out of options as I'm new to THREE.JS.</p>
  
  <p>I think I have to redefine the UV coordinates but I have no clue how to do this.</p>
  
  <p>It seems that wrapping a texture on a cylinder like object is anything but easy in THREE.JS.</p>
  
  <p>Can someone please help me on this issue ?</p>