Cesium 3dtiles大场景模型的后台加载

领导提了一个要求:进入三维页面,能直接看到3dtiles的高精度画面,不希望看到边界瓦片生成的过程(可以操作除了场景之外页面其他元素,进度条消失整个场景的三维一次性展示),由于3dtiles模型加载的机制设定,只能从其他方面着手;

思路:在初始化进入页面之后,在mounted方法中,加载出来的瓦片全部设置为无色透明,等整个3dtiles加载完时,监听事件,全部设置为显示,以下为实现代码:

javascript 复制代码
let palaceTileset = new Cesium.Cesium3DTileset({
        url: this.modelURL,
        //modelMatrix: Cesium.Matrix4.fromArray([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),
        maximumMemoryUsage: 1024 * 1.5, //不可设置太高,目标机子空闲内存值以内,防止浏览器过于卡
        backFaceCulling: true,
        maximumScreenSpaceError:128, //用于驱动细节错误;较高的值可提供更好的性能,但视觉质量较低。
        maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
        shadows: Cesium.ShadowMode.DISABLED, //是否显示阴影
        skipLevelOfDetail: true, // 确定是否应在遍历期间应用详细级别跳过(默认false)
        baseScreenSpaceError: 1024, //When skipLevelOfDetailis true,在跳过详细级别之前必须达到的屏幕空间错误(默认1024)
        skipScreenSpaceErrorFactor: 16, // 定义要跳过的最小屏幕空间错误的乘数。与 一起使用skipLevels来确定要加载哪些图块(默认16)
        skipLevels: 1, //skipLevelOfDetail是true 一个常量,定义了加载图块时要跳过的最小级别数。为 0 时,不跳过任何级别。与 一起使用skipScreenSpaceErrorFactor来确定要加载哪些图块。(默认1)
        immediatelyLoadDesiredLevelOfDetail: false, //当skipLevelOfDetail是时true,只会下载满足最大屏幕空间错误的图块。忽略跳过因素,只加载所需的图块(默认false)
        loadSiblings: true, // 如果为true则不会在已加载完概况房屋后,自动从中心开始超清化房屋 --- 何时确定在遍历期间skipLevelOfDetail是否true始终下载可见瓦片的兄弟姐妹(默认false)
        cullWithChildrenBounds: true, //是否使用子边界体积的并集来剔除瓦片(默认true)
        luminanceAtZenith: 0.2,
        dynamicScreenSpaceError: false, //减少距离相机较远的图块的屏幕空间错误(默认false)
        dynamicScreenSpaceErrorDensity: 0.0278, //数值加大,能让周边加载变快 --- 用于调整动态屏幕空间误差的密度,类似于雾密度(默认0.00278)
        dynamicScreenSpaceErrorFactor: 8, // 用于增加计算的动态屏幕空间误差的因素(默认4.0)
        dynamicScreenSpaceErrorHeightFalloff: 0.5, //密度开始下降的瓦片集高度的比率(默认0.25)
        preloadWhenHidden: true,
        show: true,
        classificationType: Cesium.ClassificationType.NONE,
        enableShowOutline: false,
        cullRequestsWhileMoving: true,
        cullRequestsWhileMovingMultiplier: 10,
        preferLeaves: true,
        progressiveResolutionHeightFraction: 0.5,
        show: true,
      })
      palaceTileset.readyPromise.then((tileset) => {
        if (this.modelHeight != 0 && this.modelHeight != undefined) {
          changeHeight(palaceTileset, this.modelHeight)
        }
        palaceTileset.style = new Cesium.Cesium3DTileStyle({
          color: {
            evaluateColor: function (feature, result) {
              return Cesium.Color.WHITE.withAlpha(0.0);
            }
          }
        });
        this.map.scene.primitives.add(palaceTileset)
        Object.assign(palaceTileset, { id: this.id })
        if (isLocate) {
          this.map.flyTo(palaceTileset)
        }
      })
      palaceTileset.allTilesLoaded.addEventListener(function () {
        palaceTileset.style = new Cesium.Cesium3DTileStyle({
          color: 'color("white")' // 恢复默认颜色,自定义的样式
        });
        palaceTileset.maximumScreenSpaceError = 16;
        palaceTileset.dynamicScreenSpaceError = true;
        if (typeof callback == 'function') callback('success')
      });
      palaceTileset.tileFailed.addEventListener(function () {
        if (typeof callback == 'function') callback('failed')
      });