求解关于ceisum3DTiles加载时出现的问题

本人刚接触cesium不久,在学习加载3Dtiles的时候遇到了问题。
似乎在我写的代码没有问题的情况下,3Dtiles并没有加载,同时也没有任何报错
代码如下:

<template>
<div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(()=>{
  debugger
  var custom = new Cesium.ArcGisMapServerImageryProvider({
  url:'//services.arcgisonline.com/ArcGis/rest/services/World_Street_Map/MapServer'
})
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4OGY5Yzk2Zi1hNmI0LTQ0M2YtYjRmMC04OTNkYTc4NmRjY2IiLCJpZCI6MTEyOTIwLCJpYXQiOjE2NjcyNzExMTZ9.rNwRRCR7YJCyRb80s71HllYaFQqkr0qXYxUowTL0BD8';
var viewer = new Cesium.Viewer('cesiumContainer', { 
    //默认属性配置    
    homeButton: false, //是否显示Home按钮
        sceneModePicker: true ,//是否显示3D/2D选择器
        navigationHelpButton: false, //是否显示帮助信息按钮
    timeline:false,//隐藏时间轴
    infoBox:false,
    baseLayerPicker:true,
    imageryProvider:custom,
    requesWaterMask:true,
    requestVertexNormals:true,
    
    })
  viewer._cesiumWidget._creditContainer.style.display = "none";

viewer.camera.setView({
  destination:new Cesium.Cartesian3(1332761,-4662399,4137888),
    orientation:{
     heading:0.60,
     pitch:-0.66}
    })

//加载3Dtiles模型
    var city = viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(75343),
      })
    )

  
})


</script>


<style>
#app{
  font-family: Avenir,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-align:center;
  color:#2c3e50;
}
html,body,#cesiumContainer{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
</style>

然后在该代码下,运行的效果如图

img

恳请各位能帮我解答一下,感谢

  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7769283
  • 这篇博客也不错, 你可以看下Cesium加载3dTiles
  • 除此之外, 这篇博客: 加载3DTiles数据并调整模型中的 二、cesium加载3Dtiles 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 代码示例

          viewer = new Cesium.Viewer("cesiumContainer", {
            terrainProvider: Cesium.createWorldTerrain(),
          });
          // 加载3Dtiles文件
          tileSet = new Cesium.Cesium3DTileset({
          // 这里的地址可以是本地地址或者是网络地址。如果是网络地址,可能会出现跨域问题,建议使用nginx服务做跨域处理
            url: "3DTiles/tileset/tileset.json",
            //maximumScreenSpaceError: 2, //最大的屏幕空间误差
       	   //maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
          });
           tileSet.readyPromise.then((tileset) => {
           viewer.scene.primitives.add(tileset);
           boundingSphereCenter = tileset.boundingSphere.center // 后续的变换需要这个变量
               // 定位到该模型
            viewer.zoomTo(
              tileset,
              // cesium方位角,可以试着调节参数掌握api的使用
              new Cesium.HeadingPitchRange(
                0.0,
                -0.5,
                tileset.boundingSphere.radius * 4.0
              )
            );
           })
    
  • 您还可以看一下 柳小龙老师的cesium视频教程课程中的 cesium视频映射在地质或3dtile上的操作小节, 巩固相关知识点