title: Applying multiple textures to same geometry
body: <p>I have planeGeometry and I have some vertices higher than others, so some vertices have different z index to generate terrain-like texture.</p>
  
  <p>I want to add different textures like grass,sand,snow to different planes.</p>
  
  <p>How can I add to material to different planes.</p>
  
  <p>This is how planegeometry is generated.
  <a href="https://github.com/mrdoob/three.js/blob/master/src/geometries/PlaneGeometry.js" rel="nofollow noreferrer">https://github.com/mrdoob/three.js/blob/master/src/geometries/PlaneGeometry.js</a></p>
  
  <pre><code>    var indices = [];
      var vertices = [];
      var normals = [];
      var uvs = [];
  
      // generate vertices, normals and uvs
  
      for ( iy = 0; iy &lt; gridY1; iy ++ ) {
          var y = iy * segment_height - height_half;
          for ( ix = 0; ix &lt; gridX1; ix ++ ) {
              var x = ix * segment_width - width_half;
              vertices.push( x, - y, 0 );
              normals.push( 0, 0, 1 );
              uvs.push( ix / gridX );
              uvs.push( 1 - ( iy / gridY ) );
          }
      }
  
      // indices
  
      for ( iy = 0; iy &lt; gridY; iy ++ ) {
  
          for ( ix = 0; ix &lt; gridX; ix ++ ) {
              var a = ix + gridX1 * iy;
              var b = ix + gridX1 * ( iy + 1 );
              var c = ( ix + 1 ) + gridX1 * ( iy + 1 );
              var d = ( ix + 1 ) + gridX1 * iy;
              // faces
              indices.push( a, b, d );
              indices.push( b, c, d );
          }
      }
  
      // build geometry
  
      this.setIndex( indices );
      this.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
      this.addAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
      this.addAttribute( 'uv', new Float32BufferAttribute( uvs, 2 ) );
  </code></pre>
  
  <p>This is how it should be done:</p>
  
  <pre><code>//Loading in Texture:
  
  var loader = new THREE.TextureLoader();
  var texture = loader.load('grass.jpg');
  //Creating material:
  
  var material = new THREE.MeshBasicMaterial({
      map: texture,
      overdraw: true,
      wireframe: false
  });
  var materials = [];
  materials.push(material);
  mesh = new THREE.Mesh(geometry, materials);
  // Applying this one to faces that need certain material:
  // https://threejs.org/docs/#api/en/core/BufferGeometry.addGroup
  geometry.addGroup();
  </code></pre>
  
  <p>Basically what I need is even adding texture to the first plane, but it always adds texture to the whole geometry,
  then I can create loop myself which does create textures for rest.</p>