Adding .png texture to the front face of this .obj

I must be able to add a .png file to the front face of this mesh to give the figure a face. I can load the figure, that’s fine. However I am struggling to add the image to the front of this mesh.

image
Here is the mesh. You can see that it becomes black when I try to apply the texture. Without trying to apply the texture, all is normal. I have tried many of the solutions I found on google and so far there is no luck.

Here is my current code below:



<html>
	<head>
		<title>Three.js Boilerplate</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
		<script src="OrbitControls.js"></script>
		<script src="OBJLoader.js"></script>

<script>
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x121212 );

var camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.x = 2;
camera.position.y = 1.5;
camera.position.z = 6;
camera.lookAt( scene.position );

const alight = new THREE.AmbientLight( 0x919191 ); // soft white light
scene.add( alight );
const plight = new THREE.PointLight( 0xf2f2f2, 1, 200 );
plight.position.set( 50, 50, 50 );
scene.add( plight );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var objLoader = new THREE.OBJLoader();
objLoader.setPath('');

var facetex = new THREE.Texture();
var mloader = new THREE.ImageLoader();
mloader.load( 'face.png' , function ( faceimg ) {
    facetex.image = faceimg;
    facetex.needsUpdate = true;
} );

// HEAD
objLoader.load('head.obj', function (object) {
    object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
        child.material.color.setHex(0x<?php echo $color ?>);
        child.material.map = facetex;
        }
    } );
    scene.add(object);
});


// TORSO
objLoader.load('torso.obj', function (object) {
    object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
        child.material.color.setHex(0x<?php echo $color ?>);
        }
    } );
    scene.add(object);
});

// LEFT ARM
objLoader.load('left_arm.obj', function (object) {
    object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
        child.material.color.setHex(0x<?php echo $color ?>);
        }
    } );
    scene.add(object);
});

// RIGHT ARM
objLoader.load('right_arm.obj', function (object) {
    object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
        child.material.color.setHex(0x<?php echo $color ?>);
        }
    } );
    scene.add(object);
});

// LEFT LEG
objLoader.load('left_leg.obj', function (object) {
    object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
        child.material.color.setHex(0x<?php echo $color ?>);
        }
    } );
    scene.add(object);
});

// RIGHT LEG
objLoader.load('right_leg.obj', function (object) {
    object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
        child.material.color.setHex(0x<?php echo $color ?>);
        }
    } );
    scene.add(object);
});

var init = function () {
	requestAnimationFrame( init );
	renderer.render(scene, camera);
};

init();
</script>
</body>
</html>



You can either use decals (hard), or add a duplicate of the object with a little increased .scale, then apply .alphaMap texture together with the face texture (easier).