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.
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>