• 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 删掉,就可以显示了。

    就这样我的问题就解决了。

    贴图不显示最主要的原因还是图片路径错误。

  • 相关阅读:
    Docker多主机互联
    数据结构
    广度优先算法走出迷宫
    golang反射
    waitGroup的使用
    golang中的mutex锁
    goroutine和channel
    如何优雅的关闭Golang Channel?
    使用context关闭协程以及协程中的协程
    golang对不同系统的编译
  • 原文地址:https://www.cnblogs.com/houBlogs/p/16038178.html
Copyright © 2020-2023  润新知