I recently started working with Three.js and encountered an issue while loading an obj object into my scene. The object loads successfully, but the materials are not provided by the MTLLoader. I'm unsure if my object is broken or if there is an issue with the MTL Files.
Below is the code snippet that adds my spaceship OBJ:
const name = "shipA_OBJ";
loadMesh('shipA_OBJ', function(obj){
obj.position.x = 0;
obj.position.y = 0;
obj.position.z = 450;
obj.rotation.x += 1;
//obj.rotation.y -= 1;
obj.scale.x = .1;
obj.scale.y = .1
obj.scale.z = .1;
addMesh(obj);
}
function addMesh(mesh){
scene.add(mesh);
console.log(mesh.getWorldPosition());
}
function loadMesh(name, callback){
var objLoader = new THREE.OBJLoader();
var matLoader = new THREE.MTLLoader();
matLoader.load('models/shipA_OBJ.mtl', function(materials){
materials.preload();
objLoader.setMaterials(materials);
objLoader.load('models/shipA_OBJ.obj', function(obj){
callback(obj);
});
});
This is the content of my Mtl file:
3ds Max Wavefront OBJ Exporter v0.97b - (c)2007 guruware
File Created: 04.05.2010 13:43:14
newmtl shipA_mat Ns 10.0000 Ni 1.5000 d 1.0000 Tr 0.0000 Tf 1.0000 1.0000 1.0000 illum 2 Ka 0.0000 0.0000 0.0000 Kd 0.5880 0.5880 0.5880 Ks 0.0000 0.0000 0.0000 Ke 0.0000 0.0000 0.0000
map_Ka s_1024_C.tga
map_Kd s_1024_C.tga
map_Ke s_1024_I.tga
map_bump s_1024_N.tga
After placing all the tga, mtl, and obj files in the same directory, I experimented by commenting out the MTLLoader. When omitted, my spaceship appeared grey, but using the MTLLoader resulted in a completely black spaceship. Despite having AmbientLight in place, I am certain that lighting is not the cause of the problem.
You can find the obj spaceship download link here: