I've successfully loaded an OBJ file and linked it with an MTL to provide a texture. However, I'm struggling to specify which texture should be associated with the model directly in the code; it seems that the texture only appears on the model if it is mentioned in the MTL file.
Despite reviewing documentation, examples, and conducting numerous Google searches, I still can't figure out how to apply a texture.
Below is my current code for loading the model and material files:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( '/3Dproject/models/' );
mtlLoader.load( 'tshirt.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'models/' );
objLoader.load( 'tshirt.obj', function ( object ) {
object.position.x = 0;
object.position.y = -50;
object.scale.x = 2;
object.scale.y = 2;
object.scale.z = 2;
scene.add( object );
}, onProgress, onError );
});
Here is an excerpt from my material file:
# MTL written from \3Dproject\models\tshirt.obj
newmtl texture
Kd 0.48 0.48 0.48
Ns 256
d 1
illum 2
Ka 0 0 0
Ks 0.04 0.04 0.04
map_Kd \texture.jpg
If I load my texture in Javascript like this:
var texloader = new THREE.TextureLoader();
var skinTexture = texloader.load('/3Dproject/models/texture.jpg', function (tex) {
skinTexture = tex;
});
How can I then apply it to my model?
You can see a working example at