Cesium 加载B3DM模型

news/2024/11/23 4:43:31/

一、引入Cesium，可以使用该链接下载cesium

链接: https://pan.baidu.com/s/1BRQyaFCkxO2xQQT5RzFUCw?pwd=kcv9 提取码: kcv9

在index.html文件中引入cesium

<script type="text/javascript" src="/Cesium/Cesium.js"></script>

二、初始化cesium，cesium初始化参数可自行配置

const cesiurView = ref();
const initCesiut = () => {Cesium.Ion.defaultAccessToken ='';cesiurView.value = new Cesium.Viewer(props.id, {animation: false, //是否显示动画控件shouldAnimate: true,homeButton: false, //是否显示Home按钮fullscreenButton: false, //是否显示全屏按钮baseLayerPicker: false, //是否显示图层选择控件geocoder: false, //是否显示地名查找控件timeline: false, //是否显示时间线控件sceneModePicker: false, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件infoBox: false, //是否显示点击要素之后显示的信息requestRenderMode: true, //启用请求渲染模式scene3DOnly: true, //仅渲染3DsceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneModeselectionIndicator: false,//不创建selectionIndicator小部件skyAtmosphere:false,//不显示天空});cesiurView.value._cesiumWidget._creditContainer.style.display = 'none';// 隐藏logocesiurView.value.scene.screenSpaceCameraController.inertiaZoom = 0.5;cesiurView.value.scene.screenSpaceCameraController.enableTilt = true; // 禁止俯仰角cesiurView.value.scene.globe.depthTestAgainstTerrain = false; //关闭地形cesiurView.value.scene.globe.show = false;cesiurView.value.scene.sun.show = false; //是否显示太阳cesiurView.value.scene.moon.show = false; //是否显示有月亮cesiurView.value.scene.skyBox.show = false; //是否显示星空cesiurView.value.scene.backgroundColor = new Cesium.Color(0,0,0,1)
};

cesium内置token，容易因token过期造成cesium加载失败，可以在Cesium官网中注册账号，获取token，然后可使用Cesium.Ion.defaultAccessToken该方法替换内置token。

二、添加B3DM到cesium中

const addB3DMModel = async () => {let tileset = await Cesium.Cesium3DTileset.fromUrl(``, {maximumScreenSpaceError: 2,//各级别最大误差show: true,skipLevels: 0,//加载图层是跳转的最小级别，0 不跳转immediatelyLoadDesiredLevelOfDetail: false,//只加载所需图块loadSiblings: false,//是否下载所有图块cullWithChildrenBounds: true,});cesiurView.value.scene.primitives.add(tileset, {disableDepthTestDistance: Number.POSITIVE_INFINITY,});cesiurView.value.zoomTo(tileset);//定位到当前模型
};

效果如下：