vue three加載obj文件不顯示貼圖

使用三維軟件導出.obj模型文件的時候，會同時導出一個材質文件.mtl， .obj和.stl文件包含的信息一樣都是幾何體頂點相關數據，材質文件.mtl包含的是模型的材質信息，比如顏色、貼圖路徑等。

加載.obj三維模型的時候，可以只加載.obj文件，然后借助three.js引擎自定義材質Material，也可以同時加載.obj和.mtl文件。

mtl文件包含了模型的材質信息，比如模型顏色、透明度等信息，還有紋理貼圖的路徑，比如顏色貼圖、法線貼圖、高光貼圖等等。

我將三維同事給到的模型放到項目中顯示這樣：

 

 

 我代碼加載是這樣的：

initObject() {
      let objLoader2 = new OBJLoader2();
      let mtlLoader = new MTLLoader();
      let _this = this;
      let urls_mtl = "/model/Soldier/tzb.mtl";
      let urls_obj = "/model/Soldier/tzb.obj";
      mtlLoader.load(urls_mtl, function (mtlParseResult) {
        console.log(mtlParseResult);
        objLoader2.setLogging(true, true);
        objLoader2.addMaterials(
          MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult)
        );
        objLoader2.load(
          urls_obj,
          function (calldata) {
            _this.oldChildren = _this.dealMeshMaterial(calldata.children);
             calldata.scale.set(0.9, 0.9, 0.9);
              calldata.position.set(0, -7, 0);
            _this.scene.add(calldata);
            _this.renderer.render();
          },
          null,
          null,
          null
        );
      });
    },

 

我的文件是這樣的：

 

 

 

一搜發現是貼圖沒加載的原因，然后我就找到.mtl文件，發現引入的圖片都是 .tga格式，

 

 

 對照着mtl文件中的名稱與obj文件的名稱做對比，找到相對應的名稱，又用在線工具將.tga的圖片轉換成了.jpg，發現顯示了一部分但沒全部顯示。 

 又發現有些 newmtl 下沒引入圖片路徑，隨便加上一張圖片后發現可以顯示（但我不清楚為啥導出沒有）。

當我都改完之后發現人物的身體沒顯示：

 

 我將.mtl文件中 身體 的屬性仔細排查后發現將 Kd 0.0000 0.0000 0.0000 刪掉，就可以顯示了。

就這樣我的問題就解決了。

貼圖不顯示最主要的原因還是圖片路徑錯誤。