Applying multiple textures to same geometry - three.js

Question

I have planeGeometry and I have some vertices higher than others, so some vertices have different z index to generate terrain-like texture.
I want to add different textures like grass,sand,snow to different planes.
How can I add to material to different planes.
This is how planegeometry is generated.
https://github.com/mrdoob/three.js/blob/master/src/geometries/PlaneGeometry.js
var indices = [];
var vertices = [];
var normals = [];
var uvs = [];
// generate vertices, normals and uvs
for ( iy = 0; iy < gridY1; iy ++ ) {
var y = iy * segment_height - height_half;
for ( ix = 0; ix < 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 < gridY; iy ++ ) {
for ( ix = 0; ix < 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 ) );
This is how it should be done:
//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();
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.