threejs使用input type=file加载glb模型

项目场景：

以前都是本地加载glb模型，最近在测试使用input type=file来输入模型。发现了一些问题。

问题描述

在使用 LoadingManager得setURLModifier添加模型得时候会报错：THREE.GLTFLoader: Couldn’t load texture，但是gltf没有这个问题

  this.manager.setURLModifier((_url: string) => {
        let hasURL = "";

        Object.keys(_bolbURLs).some((f) => {
          if (_url.indexOf(f) !== -1) {
            hasURL = URL.createObjectURL(_bolbURLs[f]);
            return true;
          }
        });
        _url = hasURL || "";
        return _url;
      });

---

原因分析：

glb和gltf有区别：GLB格式是GLTF文件的一个版本，不同之处在于，GLB格式是二进制文件格式，而GLTF格式是基于JSON（JavaScript对象表示法）的。GLB将三维场景的所有元素（包括材质、节点层次和摄影机）定位在一个压缩文件中。相比之下，GLTF文件需要外部处理文件格式，例如纹理、着色器和动画数据等其他格式。这些外部元素存储在GLTF文件中，但每个元素都使用唯一的格式编码语言（JPEG用于纹理，GLSL用于着色器，BIN用于动画数据）。

gltf需要使用setURLModifier来处理，gltf就一个文件不用。

glb/gltf区别 知乎地址

---

解决方案：

input选择文件返回的是file，把file转成url直接给GLTFLoader加载就行

 if (files[0] && files[0].name.indexOf('.glb') !== -1) {
      for (const val of files) {
      // 转成url-记得销毁
        modelUrl.value = URL.createObjectURL(val)
      }
    }