领导提了一个要求:进入三维页面,能直接看到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')
});