ThreeJS使用来自Zip的纹理加载OBJ

时间:2018-06-28 07:50:52

标签: javascript three.js zip mtl-file

我正在尝试使用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);
    });

结果是正确加载了模型,显然也加载了材料,但未渲染材料。我得到的模型没有纹理。关于如何实现我想做的任何想法?谢谢。

0 个答案:

没有答案