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

最新推荐文章于 2024-09-28 10:08:39 发布

喵喵虫

最新推荐文章于 2024-09-28 10:08:39 发布

阅读量1k

点赞数

分类专栏： threeJS 文章标签： vue.js webgl threejs glb

本文链接：https://blog.csdn.net/mmiaoChong/article/details/132620104

版权

threeJS 专栏收录该内容

10 篇文章

订阅专栏

本文讲述了作者在项目中遇到的问题，即使用`inputtype=file`加载GLB模型时THREE.GLTFLoader报错。原因在于GLB是二进制格式，需先转换为URL。解决方案是将file对象转换为URL后直接提供给GLTFLoader。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

以前都是本地加载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)
      }
    }