cesium模型的本地加载模型

需求

目前有一个需求就是需要从本地拖拽glb文件模型到cesium地球中显示模型

由于相关js库较多 本文章就不涉及拖拽功能了

思路

第一种方案

cesium通过Model.fromGltf函数来读取gltf的url
阅读此函数的源码可知 该函数本身也是从网页下载文件为 arraybuffeer流 后赋值model的gltf属性进行加载模型，但由于gltf只是一个只读属性，所以尝试重写该函数,让本地模型转化为arraybuffer后赋值加载模型

import defined from './Core/defined'
import clone from "./Core/clone";
import parseGlb from "./Scene/GltfPipeline/parseGlb";
import getMagic from "./Core/getMagic.js";
import DeveloperError from "./Core/DeveloperError";
import getJsonFromTypedArray from "./Core/getJsonFromTypedArray.js";
function setCachedGltf(model, cachedGltf) {
  model._cachedGltf = cachedGltf;
}
CachedGltf.prototype.makeReady = function (gltfJson) {
  this.gltf = gltfJson;

  const models = this.modelsToLoad;
  const length = models.length;
  for (let i = 0; i < length; ++i) {
    const m = models[i];
    if (!m.isDestroyed()) {
      setCachedGltf(m, this);
    }
  }
  this.modelsToLoad = undefined;
  this.ready = true;
};
// const gltfCache = {};
// const uriToGuid = {};
Object.defineProperties(CachedGltf.prototype, {
  gltf: {
    set: function (value) {
      this._gltf = value;
    },

    get: function () {
      return this._gltf;
    },
  },
});

function CachedGltf(options) {
  this._gltf = options.gltf;
  this.ready = options.ready;
  this.modelsToLoad = [];
  this.count = 0;
}

function CesiumOverWriteFromGltfFun(options, bimccArrayBuffer) {

  if (!defined(options) || !defined(options.url)) {
    throw new DeveloperError("options.url is required");
  }
  options = clone(options);
  options.cacheKey = 'cacheKey';
  options.basePath = 'resource';
  const model = new Cesium.Model(options);

  let cachedGltf = 'gltfCache[cacheKey]';
    cachedGltf = new CachedGltf({
      ready: false,
    });
    cachedGltf.count = 1;
    cachedGltf.modelsToLoad.push(model);
    setCachedGltf(model, cachedGltf);

    let arrayBuffer = bimccArrayBuffer
    const array = new Uint8Array(arrayBuffer);
    if (containsGltfMagic(array)) {
      // Load binary glTF
      console.log("Load binary glTF")
      const parsedGltf = parseGlb(array);
      cachedGltf.makeReady(parsedGltf);
    } else {
      // Load text (JSON) glTF
      console.log("Load text (JSON) glTF")
      const json = getJsonFromTypedArray(array);
      cachedGltf.makeReady(json);
    }
  return model;
}
function containsGltfMagic(uint8Array) {
  const magic = getMagic(uint8Array);
  return magic === "glTF";
}
export default CesiumOverWriteFromGltfFun;

这样就需要导入很多的工具类，虽然完成了需求，但是除了加大了打包的js的体积外，
还增加了和cesium 源码版本的耦合性，而且在应对没有压缩格式的模型文件(gltf)时需要进行额外的处理方式，代码复用性较差。(不过可以考虑将gltf的json bin等文件压缩为glb文件，这样仍然需要额外的性能开销)

第二种方案

将模型导入后通过 createObjectURL 函数制造一个内存的url来规避掉安全策略,也能使用model.fromgltf函数。
此时 glb 文件是可以直接createObjectURL后使用model.fromgltf函数
但是gltf仍然需要对gltf文件进行操作 需要将文件中的buffers属性和images属性的uri更换为createObjectURL生成的uri
特别重要的是

URL.createObjectURL(new Blob([JSON.stringify(changedGltf)]))

PS: 必须需要将json格式的gltf文件(changedGltf)进行JSON.stringify字符串化，否则导入后依然不显示。

结果

项目重构，采用第二种方案

参考

• Cesium加载zip文件中的GLTF模型