[Cesium] Cesium loading 3DTiles and problem summary (JS)

The basic method of Cesium loading 3DTiles

	const viewer = new Cesium.Viewer("cesiumContainer");
	const tileset = viewer.scene.primitives.add(
	  new Cesium.Cesium3DTileset({
    
    
	    url: {
    
    YOURURL},
	    //url: Cesium.IonResource.fromAssetId(96188),
	  })
	);

• The first sentence builds the view object of Cesium, and binds a div container in HTML through id for display
• Then, use the add() method under the primitive attribute of the viewer's scene attribute to add a layer to the scene
• Note: There are three Cesium entities involved here: Viewer (view), Scene (scene), PrimitiveCollection (tuple group) , where the view contains the scene, and there are tuple groups under the scene . This definition is very similar to many map APIs (Baidu Maps, ArcGIS API, etc.). See Cesium API for JS official documentation or Cesium.PrimitiveCollection description
• Here the newly created Cesium3DTileset object is used as the added tuple group
• To create a new Cesium3DTileset object, you need to specify the data source
  url, which can be specified by a relative path or URL:

  url: 'modeldata/3Dtilesdata',
  

  It is also possible to specify the source through the Cesium ion workbench using the following syntax

  url: Cesium.IonResource.fromAssetId(96188),
  

Stepping on the pit process

Using the official website tileset.json data load is empty

data source

In some tutorials, the tileset.json data is used as an example, the loaded webpage is empty, and the following error is output:

Open tileset.json, there are the following contents:

    ...
    "content": {
    
    
      "boundingVolume": {
    
    
        "region": [
          -0.0004001690908972599,
          0.8988700116775743,
          0.00010096729722787196,
          0.8989625664878067,
          0,
          241.6
        ]
      },
      "uri": "0/0/0.b3dm"
    },
    ...

Therefore, the reason why the loading is empty may be that the official website has removed other data folders (0/0/0.b3dm, etc.), but the tileset.json’s bounding box and other auxiliary information still exist, which is displayed in Cesium ion as follows :

Unable to load using Cesium.IonResource.fromAssetId(5741)

To use the data in Cesium ion, you first need to ensure that there are corresponding resources in the workspace. Otherwise, you need to upload it yourself, change "96188" to the id of the data to be imported,
and use the id of 5741. It may not be loaded because the new version of Cesium ion no longer comes with the building data of New York City, so there is no item with the id of 5741 in the resource. , as follows:

In addition, in "Asset Depot", you can search for 3DTiles of buildings in New York City, add them to the workspace, the id is still not 5741, but 75343 in the picture

other

Use the following statement to zoom the view to the area where the 3DTile is located and set the style (from the official website example):

      (async () => {
    
    
        try {
    
    
          await tileset.readyPromise;
          await viewer.zoomTo(tileset);

          // Apply the default style if it exists
          var 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);
        }
      })();