我正在尝试使用ThreeJS从远程zip文件加载OBJ模型。我需要从MTL文件加载纹理。压缩文件以平面结构包含所有文件。要提取zip文件,我正在使用此库:THREE.ZipLoader
这是我的测试代码:
new (THREE as any).ZipLoader().load(modelUrl)
.then((zip) => {
manager.setURLModifier(zip.urlResolver);
const objModelPath = zip.find(/^((?!__MACOSX).)*\.(obj)$/i)[0];
const daeModelPath = zip.find(/^((?!__MACOSX).)*\.(dae)$/i)[0];
new THREE.MTLLoader(manager).load(mtlFilePath,
(materials) => {
const materialsManager = new THREE.LoadingManager();
materialsManager.setURLModifier((url) => {
const fileUrl = zip.find(new RegExp(`^((?!__MACOSX).)*${url}$`))[0];
const resolvedUrl = zip.urlResolver(fileUrl);
return resolvedUrl ? resolvedUrl : '';
});
materials.setManager(manager);
materials.preload();
new (THREE as any).OBJLoader(manager).setMaterials(materials).load(objModelPath,
(model) => {
this.scene.add(model);
console.log(this.scene);
augmentingObject.sceneObject = model;
if (selected) {
this.selectObject(model);
}
this.render();
},
null,
(error) => {
console.log(error);
}
);
},
null,
(error) => {
console.log(error);
}
);
}
}
})
.catch((error) => {
console.log(error);
});
结果是正确加载了模型,显然也加载了材料,但未渲染材料。我得到的模型没有纹理。关于如何实现我想做的任何想法?谢谢。