I tried to load 3DTileset from IonAssets,but there is someting wrong

CesiumJS
1

I tried to load 3DTileset from IonAssets, it’s functional in ‌Basic HTML/JS Page，but there is an error when it works in vue3: ‌

RangeError: Invalid array length
    at new DynamicEnvironmentMapManager (DynamicEnvironmentMapManager.js:120:38)
    at new Cesium3DTileset (Cesium3DTileset.js:805:33)
    at Cesium3DTileset.fromUrl (Cesium3DTileset.js:1968:19)
    at async Proxy.loadTileset (index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/AirSpaceView.vue?vue&type=script&lang=js:407:25)

My code is :

    async loadTileset(viewer) {
      try {
        const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(96188);
        if (tileset) {
          viewer.scene.primitives.add(tileset);
          await viewer.zoomTo(tileset);

          // Apply the default style if it exists
          const extras = tileset.asset.extras;
          if (
            Cesium.defined(extras) &&
            Cesium.defined(extras.ion) &&
            Cesium.defined(extras.ion.defaultStyle)
          ) {
            tileset.style = new Cesium.Cesium3DTileStyle(extras.ion.defaultStyle);
          }
        }
      } catch (error) {
        console.log(error);
      }
    }

The error was happened when execute “const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(96188);”
Please help me , thanks!!!

2

Hi @SakuraMth ,

Thanks for your post and welcome to the Cesium community.

In your app are you intentionally trying to load a prebuilt version of Cesium using the IIFE (Immediately Invoked Function Expression) module format and making it available as a global variable? This is what your import statement Cesium.Cesium3DTileset.fromIonAssetId(96188);” indicates. This is the common use pattern for a basic HTML/JS page.

However in Vue apps you typically load packages as Node modules using a modern development setup. And you then load modules using the syntax import { Ion, Viewer } from "cesium"; You need to make sure packages are installed with your package manager (eg. npm add cesium) before you import.

Here is another support thread covering use of CesiumJS in a Vue app Configuring Cesium to run in Vue.js App - #4 by sanjeetsuhag

Hope that helps and please let us know if we can be of further assistance.
Best,
Luke

3

Thanks for the reply, but my code is almost the same as what you described. I used Yarn to install Cesium v1.127, and my code is:
import * as Cesium from ‘cesium’;
import ‘cesium/Build/Cesium/Widgets/widgets.css’;

5

Hi @SakuraMth ,

Thanks for clarifying and my apologies for misunderstanding your original post.

To help narrow down the cause of your issue, would you be able to try and reproduce it using our sandcastle tool https://sandcastle.cesium.com/. This will help us understand if this issue is related to the CesiumJS API, the source data you are loading, or something specific to your app.

Please let me know if you have further questions and I hope we can narrow down and help solve the issue soon.

Best,
Luke

6

The code runs fine in the sandbox, and I don’t know why. But I noticed that when my Tileset fails to load properly, the infoPanel that should appear in the upper right corner when clicking an entity doesn’t show up either. Also, today I suddenly found that this code started working, and then the infoPanel appeared when clicking entities. However, I didn’t modify my code - it just suddenly loaded successfully.‌
1744855448123