在加载成功后模型会显示黑色或者白色模块,但是mtl文件是加载成功的,如果在mtl中使用了纹理贴图,需要在mtl文件中修改一下纹理贴图的路径(不只是需要mtl文件,还需要贴图文件),这里的路径是图片的相对路径。

loadObjWithMtl(scene) {
      const that = this;
      const assetsUrl = process.env.BASE_URL + process.env.VUE_APP_ASSETS;
      const path = assetsUrl + "/model/";
      const objName = "方体.obj";
      const mtlName = "方体.mtl";
  
      initModel();
      function initModel() {
        try {
          var mtlLoader = new MTLLoader();
          mtlLoader.resourcePath = path;
          mtlLoader.path = path;
          // 设置构造材质的一些选项。
          // mtlLoader.setMaterialOptions({
          //   side: THREE.DoubleSide,
          //   wrap: THREE.MirroredRepeatWrapping,
          //   normalizeRGB: false,
          //   ignoreZeroRGBs: false,
          //   invertTrProperty: false
          // });
          mtlLoader.load(mtlName, function (materials) {
            materials.preload();
            var objLoader = new OBJLoader();
            objLoader.setMaterials(materials);
            // 设置由 MTLLoader 载入的材质,或是其它由 MTLLoader.MaterialCreator 提供的材质。
            // materials.setMaterialOptions({
            //   side: THREE.DoubleSide
            // });
            objLoader.setPath(path);
            objLoader.load(objName, function (obj) {
              console.log(obj.children);
              obj.children.map(item => {
                item.geometry.center();
                item.scale.set(100, 100, 100);
                item.castShadow = true;
                item.receiveShadow = true;
              });
              console.log(scene);
              scene.add(obj)
            });
          });
        } catch (e) {
          console.error("解析失败", e);
        }
      }
    }

效果图:

 

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐