使用vue和cesium加载3dtiles时，提Cannot read properties of undefined (reading 'then')？

Question

<script setup>
import {onMounted, ref} from 'vue'
import * as Cesium from 'cesium'

onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {})
   var tileset = new Cesium.Cesium3DTileset({
      url: "../public/mars3d-max-shihua-3dtiles-master/tileset.json",
    });
    viewer.scene.primitives.add(tileset);
    tileset.readyPromise.then(() => viewer.flyTo(tileset));
})
</script>

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

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

报错：Uncaught TypeError: Cannot read properties of undefined (reading 'then')
文件位于App.vue
新人上路，请大佬不吝赐教！

Answer 1

看一下这个PR里面的示例？ 👉 Deprecate ready promises by ggetz · Pull Request #11059 · CesiumGS/cesium

Before

const tileset = scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(1240402),
  })
);

tileset.readyPromise
  .then(function (tileset) {
    viewer.zoomTo(
      tileset,
      new Cesium.HeadingPitchRange(
        0.5,
        -0.2,
        tileset.boundingSphere.radius * 4.0
      )
    );
  })
  .catch(function (error) {
    console.log(error);
  });

After

try {
  const tileset = await Cesium3DTileset.fromUrl(Cesium.IonResource.fromAssetId(1240402));
  scene.primitives.add(tileset);
  viewer.zoomTo(
      tileset,
      new Cesium.HeadingPitchRange(
        0.5,
        -0.2,
        tileset.boundingSphere.radius * 4.0
      )
    );
} catch (error) {
  console.log(error)
}

Answer 2

查询官网的文档可以看到“This object is normally not instantiated directly, use Cesium3DTileset.fromUrl.”这句话，所以在调用3dtiles数据时应该使用Cesium3DTileset.fromUrl这个方法，相应代码修改如下：

var tileset = new Cesium.Cesium3DTileset.fromUrl({
      url: "../public/mars3d-max-shihua-3dtiles-master/tileset.json",
    });