Threejs加载包含贴图信息的obj文件遇到的问题

Threejs加载包含贴图信息obj文件遇到的问题

今天在开发实验室三维重建助手时，遇到了Threejs加载obj文件和png贴图，模型不显示贴图的问题。在此记录修复过程：

项目在之前使用Treejs加载obj模型+png文件都是可以正常展示的，但是在与后台对接了TripoSR算法（一个根据图片生成三维模型的算法，生成结果为obj文件和png贴图）之后，使用Tressjs加载模型发现模型始终无法贴图。

加载模型代码如下：

loaderModel () {
    const textureLoader = new THREE.TextureLoader()
    textureLoader.load(this.imgUrl, (texture) => {
      texture.colorSpace = THREE.SRGBColorSpace
      const material = new THREE.MeshLambertMaterial({
          map: texture
      })
      const objLoader = new OBJLoader()
      const msg = '模型已加载，正在贴图……'
      objLoader.load(this.objUrl, (loadedMesh) => {
        this.computeScale(loadedMesh)
        this.$message.info(msg)
        loadedMesh.traverse((child) => {
           if (child.isMesh) {
              child.material = material
           }
        })
        options.meshScale = loadedMesh.scale.x
        loadedMesh.position.set(options.meshPosX, options.meshPosY, options.meshPosZ)
        loadedMesh.scale.set(options.meshScale, options.meshScale, options.meshScale)
        loadedMesh.rotation.set(options.meshRateX, options.meshRateY, options.meshRateZ)
        this.objs['mesh'] = loadedMesh
        this.scene.add(loadedMesh)
        this.animate()
      }, this.onProgress)
      this.loader = objLoader
    })
  }
},

网上搜索大多数给出的意见就是：贴图和模型是异步从后台异步加载的，检查了一下自己的代码发现并没有这个问题

苦思无果，最后尝试将算法生成的模型导入到网上的在线3D模型编辑器看看是不是生成3D模型不完整的原因，意想不到的结果出现了在我将obj文件上传到在线编辑器后还没有上传贴图这个时间，发现在线编辑器中展示的模型居然是带有贴图的

于是回到开发项目中，选择对TripoSR算法生成的模型（毕竟就它特殊）只加载obj文件不进行贴图，发现可以解决这个问题，修复bug后可以正常展示

另外一个小插曲，在使用平台时，由于在展示模型时增加了一个dat.gui控制器用于相机、环境、模型参数的控制，发现关闭modal时，控制器不会关闭，在第二次打开时它有会重新创建一个控制器，导致重复创建。

检查了一下代码发现在beforeDestroy方法中已经进行元素销毁了

beforeDestroy () {
	if (this.gui) {
		this.gui.domElement.remove()
    }
}

但是modal关闭后，它依然存在，继续检查发现使用了路由配置了keepAlive: true，好吧，那就只能另寻他法了
这里我是通过监听modal的关闭与打开来判断是否销毁dat.gui控制器，可以解决重复创建的问题

watch: {
   vis: {
     handler (newv, oldv) => {
       if (!newv && this.gui) {
      		this.gui.domElement.remove()
       }
     }
   }
}