0

I'm working with Three.js. I have loaded a obj object into my scene. The object loads but the MTLLoader is not providing the materials. Is my object broken? Is it the MTL Files?

This code 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 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

I've placed all the tga, mtl and obj file in the same directory. when I comment out the MTLLoader my spaceship appears grey but with the MTLLoader my spacesip is all black. I have AmbientLight so I'm sure that lighting is not the issue.

This is the link to where I download my obj spaceship : https://www.turbosquid.com/FullPreview/Index.cfm/ID/531813

Sh. Pavel
  • 1,584
  • 15
  • 28
sirshakir
  • 129
  • 4
  • 13

1 Answers1

0

In the MTL loader you need to set the texture path. This is not intuitive when thinking of 3d models locally on your operating system, but makes sense on the web. The code cannot assume the location of the file, even if placed in the same directory.

Luckily the class MTLloader contains a method for this.

See: https://threejs.org/docs/#examples/loaders/MTLLoader

An example:

function loadMesh(name, callback){
var objLoader = new THREE.OBJLoader();
var matLoader = new THREE.MTLLoader();
matLoader.setTexturePath("models/");
matLoader.load('models/shipA_OBJ.mtl', function(materials){
   materials.preload();
    objLoader.setMaterials(materials);
    objLoader.load('models/shipA_OBJ.obj', function(obj){
        callback(obj);
    });
});

You can also use setPath to make this common for any references in the model.

Radio
  • 2,810
  • 1
  • 21
  • 43