vlambda博客
学习文章列表

WebGL加载本地模型

前言

大部分的webgl框架,比如threejs和babylon等,都可以加载obj和gltf模型。我们的引擎,基于three封装,同样有加载模型的loader,因此加载obj和gltf模型也是很简单就可以实现的。

不过加载文件都是在线的文件,也就是通过url的形式进行加载。团队开发的三维可视化平台框架,需要能够上传obj和gltf等格式的模型,在上传前,需要先对模型预览,这就涉及到如何加载本地模型的问题了。

加载本地模型

本文以gltf为例,进行说明。加载本地模型的思路是这样的:
既然引擎可以通过url的机制,加载模型。那么如果有一种机制,可以把本地文件及其关联的资源(比如贴图)等转换成url的形式,就可以进行使用loader进行访问了。

Blob & File

首先我们学习下Blob和File对象,以下内容来自MDN:

Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

File 对象是特殊类型的 Blob,且可以用在任意的 Blob 类型的 context 中。比如说, FileReader, URL.createObjectURL(), createImageBitmap() (en-US), 及 XMLHttpRequest.send() 都能处理 BlobFile

createObjectURL

URL对象上的方法 createObjectURL可以把一个Blob对象或者File对象,转化成一个url对象,语法如下:

objectURL = URL.createObjectURL(object);

加载本地模型

有了上述基础知识,大致的思路就出来了:

  • 首先 加载本地文件,读取file对象(可能是多个File对象,因为一个模型可能包括多个资源文件)。

  • 找出主要文件(gltf glb等格式的)文件,主文件通过 createObjectURL方法转换成url对象

  • 找出其他文件,通过createObjectURL方法转换成url对象

以上思路的大致代码如下:

let files = document.getElementById("file-input").files;

          if (!files.length) return;
          console.log(files);
          let rootFile;
          const fileMap = new Map();
          Array.from(files).forEach((file) => fileMap.set(file.name, file));
          Array.from(fileMap).forEach(([path, file]) => {
            if (file.name.match(/\.(gltf|glb)$/)) {
              rootFile = file;
              rootPath = path.replace(file.name, "");
            }
          });
          const fileUrl = URL.createObjectURL(rootFile);
          const gltf = await load(fileUrl, rootPath, fileMap);

function load(url, rootPath, assetMap{
      const index = url.lastIndexOf("/");
      const baseURL = index === -1 ? "./" : url.substr(0, index + 1);
      const manager = new dt.LoadingManager();
      // Load.
      return new Promise((resolve, reject) => {
        manager.setURLModifier((url, path) => {
          const normalizedURL =
            rootPath +
            decodeURI(url)
            .replace(baseURL, "")
            .replace(/^(\.?\/)/"");

          if (assetMap.has(normalizedURL)) {
            const blob = assetMap.get(normalizedURL);
            const blobURL = URL.createObjectURL(blob);
            blobURLs.push(blobURL);
            return blobURL;
          }
          return (path || "") + url;
        });
        const loader = new dt.GLTFLoader(manager).setCrossOrigin("anonymous");
        loader.setDRACOLoader(new dt.DRACOLoader());
        loader.setMeshoptDecoder(MeshoptDecoder);
        const blobURLs = [];
        let time = new Date().getTime();
        loader.load(url,(gltf) => {
            const scene = gltf.scene || gltf.scenes[0];
            const clips = gltf.animations || [];
            if (!scene) {
              throw new Error("This model contains no scene");
            }
            console.log("delta"new Date().getTime() - time);
            blobURLs.forEach(URL.revokeObjectURL);
            resolve(gltf);
          },
          undefined,
          reject
        );
      });
    }

总结

通过上述方式,可以写简单工具,帮助开发和建模人员随时查看模型的情况。

image.png

除gltf模型外,其他格式的模型,比如fbx或者obj,也可以类似操作。

欢迎关注ITman彪叔,可视化服务专家,提供三维可视化,数据中心,智慧园区,智慧楼宇,工业组态, 2d拓扑,大屏呈现等可视化专业服务。