objloader не загружает материал

Question

Я работаю с Three.js. Я загрузил объект obj в мою сцену. Объект загружается, но MTLLoader не предоставляет материалы. Мой объект сломан? Это файлы MTL?

Этот код добавляет мой космический корабль 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);
    });
});

}

Это мой файл Mtl

Экспортер 3ds Max Wavefront OBJ v0.97b - (c)2007 гуру

Файл создан: 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

Я поместил все файлы tga, mtl и obj в один каталог. когда я комментирую MTLLoader, мой космический корабль выглядит серым, но с MTLLoader мой пробел становится черным. У меня есть AmbientLight, поэтому я уверен, что освещение не проблема.

Это ссылка на то, куда я загружаю свой космический корабль obj: https://www.turbosquid.com/FullPreview/Index.cfm/ID/531813

Answer 1

В загрузчике MTL вам нужно установить путь текстуры. Это не интуитивно понятно, когда вы думаете о 3d-моделях локально в вашей операционной системе, но имеет смысл в Интернете. Код не может предполагать местоположение файла, даже если он находится в том же каталоге.

К счастью, класс MTL loader содержит метод для этого.

Смотрите: https://threejs.org/docs/

Пример:

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);
    });
});

Вы также можете использовать setPath, чтобы сделать это общим для любых ссылок в модели.