How can I load multiple textures to a single Mesh that have different vertex-groups?

Questions
1

The single mesh has 4 vertex-groups, Face, Mouth, Eyelashes and Torso. individually I can load them, but all appear always in the same place. How can they be assigned correctly?

I guess that is not possible. Then there is only the way to rebuild the mesh.

var loader = new THREE.JSONLoader();
			
var head = new THREE.Group();	
	loader.load("./three/models/JSON/Blender/head.json", function(geometry, materials){
var material = new THREE.MeshPhongMaterial({morphTargets: true, map: THREE.ImageUtils.loadTexture('./three/models/JSON/Blender/FaceTextur.jpg')});
var eyelashes = new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('./three/models/JSON/Blender/Eyelashes.jpg')});
var mouth = new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('./three/models/JSON/Blender/Mouth.jpg')});
var torso = new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('./three/models/JSON/Blender/Torso.jpg')});

var mesh = new THREE.Mesh( geometry, material, eyelashes, mouth, torso );
	mesh.scale.set( 13, 13, 13 );
	mesh.position.x = 0;				 
	mesh.position.y = -25;			    
	mesh.position.z = 0;			    
	mesh.rotation.x = -0.2;					
	mesh.rotation.y = 0;		
	head.add( mesh );
	});
	
	loader.load("./three/models/JSON/Blender/EyeL.json", function(geometry, materials){
var material = new THREE.MeshPhongMaterial({morphTargets: true, map: THREE.ImageUtils.loadTexture('./three/models/JSON/Blender/EyeTextur.jpg')});	
var mesh = new THREE.Mesh( geometry, material );
	mesh.scale.set( 23, 23, 23 ); //( 695, 695, 695 );
	mesh.position.x = 40;				
	mesh.position.y = 214;			    
	mesh.position.z = 69;			    
	mesh.rotation.x = -0.16;			
	mesh.rotation.y = -0.05;					
	head.add( mesh );
	});			
	
	loader.load("./three/models/JSON/Blender/EyeR.json", function(geometry, materials){
var material = new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('./three/models/JSON/Blender/EyeTextur.jpg')});	
var mesh = new THREE.Mesh( geometry, material );
	mesh.scale.set( 23, 23, 23 ); 
	mesh.position.x = -52;				  
	mesh.position.y = 214;			    
	mesh.position.z = 69;			    
	mesh.rotation.x = -0.16;			
	mesh.rotation.y = 0.12;			    	
	head.add( mesh );
	});			
	scene.add( head );

//JSON File

"materials":[{
    "depthTest":true,
    "transparent":false,
    "depthWrite":true,
    "colorSpecular":[0.5,0.5,0.5],
    "DbgName":"Face",
    "wireframe":false,
    "visible":true,
    "DbgIndex":0,
    "DbgColor":61166,
    "doubleSided":false,
    "specularCoef":103,
    "colorEmissive":[0,0,0],
    "opacity":1,
    "colorDiffuse":[0.8,0.8,0.8],
    "shading":"phong",
    "blending":1
},{
    "depthTest":true,
    "transparent":true,
    "depthWrite":true,
    "DbgName":"Eyelashes",
    "wireframe":false,
    "visible":true,
    "DbgIndex":0,
    "DbgColor":15658734,
    "doubleSided":false,
    "colorEmissive":[0,0,0],
    "opacity":0,
    "colorDiffuse":[0.0414118,0.0379608,0.0310588],
    "shading":"lambert",
    "blending":1
},{
    "depthTest":true,
    "transparent":false,
    "depthWrite":true,
    "colorSpecular":[0.5,0.5,0.5],
    "DbgName":"Mouth",
    "wireframe":false,
    "visible":true,
    "DbgIndex":15,
    "DbgColor":15658734,
    "doubleSided":false,
    "specularCoef":103,
    "colorEmissive":[0,0,0],
    "opacity":1,
    "colorDiffuse":[0.8,0.8,0.8],
    "shading":"phong",
    "blending":1
},{
    "depthTest":true,
    "transparent":false,
    "depthWrite":true,
    "colorSpecular":[0.5,0.5,0.5],
    "DbgName":"Torso",
    "wireframe":false,
    "visible":true,
    "DbgIndex":9,
    "DbgColor":15658734,
    "doubleSided":false,
    "specularCoef":103,
    "colorEmissive":[0,0,0],
    "opacity":1,
    "colorDiffuse":[0.8,0.8,0.8],
    "shading":"phong",
    "blending":1
},{
2

Can you post a screenshot? I’m not sure I understand what your problem is.

3

@looeee Thanks for the answer. It looks like this.

Model

The whole is one mesh, but has different areas.

var loader = new THREE.JSONLoader();
var group = new THREE.Group();
	
loader.load( "./three/models/JSON/Blender/Face.json", function addModelToScene( geometry, materials ){			
var material = new THREE.MeshPhongMaterial({morphTargets: true, map: THREE.ImageUtils.loadTexture('./three/models/JSON/Blender/Face.jpg')});					
var face = new THREE.Mesh( geometry, material );		
	face.scale.set( 17, 13, 16 );
	face.position.set( 0,-17, 0);				
	face.rotation.set( -0.1, 0.0, 0.0);	
	group.add( face );			
		
loader.load( "./three/models/JSON/Blender/AugeHighResL.json", function ( geometry, materials ){							
var material = new THREE.MeshPhongMaterial({morphTargets: true, map: THREE.ImageUtils.loadTexture('./three/models/JSON/Blender/EyeTextur.jpg')});		
var eyes = new THREE.Mesh( geometry, material );
	eyes.scale.set( 24, 24, 24 ); 
	eyes.position.set( 50, 217, 124);	     			
	eyes.rotation.set(-0.16, 0.06, 0.0);             
	group.add( eyes );
	});		
        scene.add( group );		
	
mixer = new THREE.AnimationMixer( face );
	
var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'test', geometry.morphTargets, 30 );		
	
	mixer.clipAction( clip ).setDuration( 6 );
var action = mixer.clipAction( clip );
	
	Play.onclick = function Play() {		
	action.play();		
	}
	Stop.onclick = function Stop() {		
	action.stop();		
	}	
	});