Merge pull request #66 from CesiumGS/update-sandcastles-cesium-107

Update sandcastles for new CesiumJS API
CesiumGS · Aug 30, 2023 · 006be85 · 006be85
2 parents bd64636 + 0ad5aa5
commit 006be85
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 65 deletions.
diff --git a/1.1/BoundingBoxTests/README.md b/1.1/BoundingBoxTests/README.md
@@ -121,17 +121,19 @@ const viewer = new Cesium.Viewer("cesiumContainer");
 let currentTileset;
 
 // Creates the tileset for the sample with the given name.
-function createTileset(exampleName) {
+async function createTileset(exampleName) {
   if (Cesium.defined(currentTileset)) {
     viewer.scene.primitives.remove(currentTileset);
     currentTileset = undefined;
   }
   // Create the tileset, and move it to a certain position on the globe
   currentTileset = viewer.scene.primitives.add(
-    new Cesium.Cesium3DTileset({
-      url: `http://localhost:8003/1.1/BoundingBoxTests/${exampleName}/tileset.json`,
-      debugShowBoundingVolume: true,
-    })
+    await Cesium.Cesium3DTileset.fromUrl(
+      `http://localhost:8003/1.1/BoundingBoxTests/${exampleName}/tileset.json`,
+      {
+        debugShowBoundingVolume: true,
+      }
+    )
   );
   currentTileset.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
     Cesium.Cartesian3.fromDegrees(-75.152325, 39.94704, 0)
@@ -155,8 +157,8 @@ function createTileset(exampleName) {
 function createSampleOption(name, infoText) {
   return {
     text: name,
-    onselect: function () {
-      createTileset(name);
+    onselect: async function () {
+      await createTileset(name);
     },
   };
 }

diff --git a/1.1/MetadataGranularities/README.md b/1.1/MetadataGranularities/README.md
@@ -14,10 +14,12 @@ const viewer = new Cesium.Viewer("cesiumContainer");
 // Create the tileset, and set its model matrix to move it
 // to a certain position on the globe
 const tileset = viewer.scene.primitives.add(
-  new Cesium.Cesium3DTileset({
-    url: "http://localhost:8003/1.1/MetadataGranularities/tileset.json",
-    debugShowBoundingVolume: true,
-  })
+  await Cesium.Cesium3DTileset.fromUrl(
+    "http://localhost:8003/1.1/MetadataGranularities/tileset.json",
+    {
+      debugShowBoundingVolume: true,
+    }
+  )
 );
 tileset.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
   Cesium.Cartesian3.fromDegrees(-75.152325, 39.94704, 0.0)

diff --git a/1.1/MultipleContents/README.md b/1.1/MultipleContents/README.md
@@ -27,9 +27,9 @@ let pointsContent;
 
 // Create the tileset in the viewer, loading it from a local server
 const tileset = viewer.scene.primitives.add(
-  new Cesium.Cesium3DTileset({
-    url: "http://localhost:8003/1.1/MultipleContents/tileset.json"
-  })
+  await Cesium.Cesium3DTileset.fromUrl(
+    "http://localhost:8003/1.1/MultipleContents/tileset.json"
+  )
 );
 
 // Move the tileset to a certain position on the globe,

diff --git a/1.1/SparseImplicitOctree/README.md b/1.1/SparseImplicitOctree/README.md
@@ -24,10 +24,12 @@ const viewer = new Cesium.Viewer("cesiumContainer");
 
 // Create the tileset in the viewer
 const tileset = viewer.scene.primitives.add(
-  new Cesium.Cesium3DTileset({
-    url: "http://localhost:8003/1.1/SparseImplicitOctree/tileset.json",
-    debugShowBoundingVolume: true,
-  })
+  await Cesium.Cesium3DTileset.fromUrl(
+    "http://localhost:8003/1.1/SparseImplicitOctree/tileset.json",
+    {
+      debugShowBoundingVolume: true,
+    }
+  )
 );
 
 // Move the tileset to a certain position on the globe,

diff --git a/1.1/SparseImplicitQuadtree/README.md b/1.1/SparseImplicitQuadtree/README.md
@@ -16,10 +16,12 @@ const viewer = new Cesium.Viewer("cesiumContainer");
 
 // Create the tileset in the viewer
 const tileset = viewer.scene.primitives.add(
-  new Cesium.Cesium3DTileset({
-    url: "http://localhost:8003/1.1/SparseImplicitQuadtree/tileset.json",
-    debugShowBoundingVolume: true,
-  })
+  await Cesium.Cesium3DTileset.fromUrl(
+    "http://localhost:8003/1.1/SparseImplicitQuadtree/tileset.json",
+    {
+      debugShowBoundingVolume: true,
+    }
+  )
 );
 
 // Move the tileset to a certain position on the globe,

diff --git a/1.1/TilesetWithFullMetadata/README.md b/1.1/TilesetWithFullMetadata/README.md
@@ -21,9 +21,9 @@ const viewer = new Cesium.Viewer("cesiumContainer");
 
 // Load the tileset from a local server
 const tileset = viewer.scene.primitives.add(
-  new Cesium.Cesium3DTileset({
-    url: "http://localhost:8003/1.1/TilesetWithFullMetadata/tileset.json",
-  })
+  await Cesium.Cesium3DTileset.fromUrl(
+    "http://localhost:8003/1.1/TilesetWithFullMetadata/tileset.json"
+  )
 );
 
 /**
@@ -36,7 +36,6 @@ const tileset = viewer.scene.primitives.add(
  * @param {MetadataEntity} entity The entity
  */
 function printMetadata(schema, entity) {
-
   // Iterate over all classes of the schema
   const classes = schema.classes;
   for (let metadataClassId in classes) {
@@ -47,7 +46,6 @@ function printMetadata(schema, entity) {
       const properties = metadataClass.properties;
       for (let metadataClassPropertyId in properties) {
         if (properties.hasOwnProperty(metadataClassPropertyId)) {
-
           // Obtain the value of each property from the
           // metadata entity, and print it to the console
           const value = entity.getProperty(metadataClassPropertyId);
@@ -65,9 +63,6 @@ function printMetadata(schema, entity) {
   }
 }
 
-// Wait until the tileset and its associated metadata are loaded,
-// and then print the metadata of the tileset
-tileset.readyPromise.then(function () {
-  printMetadata(tileset.schema, tileset.metadata);
-});
+// Print the metadata of the tileset
+printMetadata(tileset.schema, tileset.metadata);
 ```
diff --git a/glTF/CESIUM_primitive_outline/BoxPrimitiveOutline/README.md b/glTF/CESIUM_primitive_outline/BoxPrimitiveOutline/README.md
@@ -11,9 +11,9 @@ const viewer = new Cesium.Viewer("cesiumContainer");
 
 // Create the tileset, and move it to a certain position on the globe
 const tileset = viewer.scene.primitives.add(
-  new Cesium.Cesium3DTileset({
-    url: `http://localhost:8003/tileset.json`,
-  })
+  await Cesium.Cesium3DTileset.fromUrl(
+    `http://localhost:8003/glTF/CESIUM_primitive_outline/BoxPrimitiveOutline/tileset.json`,
+  )
 );
 tileset.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
   Cesium.Cartesian3.fromDegrees(-75.152325, 39.94704, 2)

diff --git a/glTF/EXT_structural_metadata/PropertyAttributesPointCloud/README.md b/glTF/EXT_structural_metadata/PropertyAttributesPointCloud/README.md
@@ -32,10 +32,12 @@ const viewer = new Cesium.Viewer("cesiumContainer");
 
 // Load the tileset from a local server
 const tileset = viewer.scene.primitives.add(
-  new Cesium.Cesium3DTileset({
-    url: `http://localhost:8003/glTF/EXT_structural_metadata/PropertyAttributesPointCloud//tileset.json`,
-    debugShowBoundingVolume: true,
-  })
+  await Cesium.Cesium3DTileset.fromUrl(
+    `http://localhost:8003/glTF/EXT_structural_metadata/PropertyAttributesPointCloud//tileset.json`,
+    {
+      debugShowBoundingVolume: true,
+    }
+  )
 );
 
 // Move the tileset to a certain position on the globe,
@@ -69,8 +71,8 @@ const shaders = {
 
   // The shader that uses the `classification` value from the metadata
   // and uses this to select a color for rendering the points.
-  
-  // NOTE: The classification attribute is accessed in the vertex 
+
+  // NOTE: The classification attribute is accessed in the vertex
   // shader here. When it is accessed in the fragment shader, it
   // may not have exactly the expected value. This is tracked in
   // https://github.com/CesiumGS/cesium/issues/10699

diff --git a/glTF/GpuInstancesMetadata/README.md b/glTF/GpuInstancesMetadata/README.md
@@ -19,10 +19,12 @@ const viewer = new Cesium.Viewer("cesiumContainer");
 
 // Create the tileset, and move it to a certain position on the globe
 const tileset = viewer.scene.primitives.add(
-  new Cesium.Cesium3DTileset({
-    url: `http://localhost:8003/glTF/GpuInstancesMetadata/tileset.json`,
-    debugShowBoundingVolume: true,
-  })
+  await Cesium.Cesium3DTileset.fromUrl(
+    `http://localhost:8003/glTF/GpuInstancesMetadata/tileset.json`,
+    {
+      debugShowBoundingVolume: true,
+    }
+  )
 );
 tileset.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
   Cesium.Cartesian3.fromDegrees(-75.152325, 39.94704, 0)

diff --git a/glTF/glTF-Mesh-Features-Samples-Sandcastle.js b/glTF/glTF-Mesh-Features-Samples-Sandcastle.js
@@ -29,20 +29,20 @@ function createCustomShader() {
   return customShader;
 }
 
-
-
 // Creates the tileset from the tileset.json in the given subdirectory
-function createTileset(subdirectory) {
+async function createTileset(subdirectory) {
   if (Cesium.defined(currentTileset)) {
     viewer.scene.primitives.remove(currentTileset);
     currentTileset = undefined;
   }
   // Create the tileset, and move it to a certain position on the globe
   currentTileset = viewer.scene.primitives.add(
-    new Cesium.Cesium3DTileset({
-      url: `http://localhost:8003/${subdirectory}/tileset.json`,
-      debugShowBoundingVolume: true,
-    })
+    await Cesium.Cesium3DTileset.fromUrl(
+      `http://localhost:8003/${subdirectory}/tileset.json`,
+      {
+        debugShowBoundingVolume: true,
+      }
+    )
   );
   currentTileset.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
     Cesium.Cartesian3.fromDegrees(-75.152325, 39.94704, 0)
@@ -83,8 +83,8 @@ function setInfoText(infoText) {
 function createSampleOption(name, directory, infoText) {
   return {
     text: name,
-    onselect: function () {
-      createTileset(directory);
+    onselect: async function () {
+      await createTileset(directory);
       setInfoText(infoText);
     },
   };

diff --git a/glTF/glTF-Property-Texture-Sandcastle.js b/glTF/glTF-Property-Texture-Sandcastle.js
@@ -2,10 +2,12 @@ const viewer = new Cesium.Viewer("cesiumContainer");
 
 // Create the tileset, and move it to a certain position on the globe
 const tileset = viewer.scene.primitives.add(
-  new Cesium.Cesium3DTileset({
-    url: `http://localhost:8003/glTF/EXT_structural_metadata/SimplePropertyTexture/tileset.json`,
-    debugShowBoundingVolume: true,
-  })
+  await Cesium.Cesium3DTileset.fromUrl(
+    `http://localhost:8003/glTF/EXT_structural_metadata/SimplePropertyTexture/tileset.json`,
+    {
+      debugShowBoundingVolume: true,
+    }
+  )
 );
 tileset.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
   Cesium.Cartesian3.fromDegrees(-75.152325, 39.94704, 0)

diff --git a/glTF/glTF-Structural-Metadata-Samples-Sandcastle.js b/glTF/glTF-Structural-Metadata-Samples-Sandcastle.js
@@ -8,17 +8,19 @@ let currentTileset;
 let currentActiveFeatureIdLabel = 0;
 
 // Creates the tileset from the tileset.json in the given subdirectory
-function createTileset(subdirectory) {
+async function createTileset(subdirectory) {
   if (Cesium.defined(currentTileset)) {
     viewer.scene.primitives.remove(currentTileset);
     currentTileset = undefined;
   }
   // Create the tileset, and move it to a certain position on the globe
   currentTileset = viewer.scene.primitives.add(
-    new Cesium.Cesium3DTileset({
-      url: `http://localhost:8003/${subdirectory}/tileset.json`,
-      debugShowBoundingVolume: true,
-    })
+    await Cesium.Cesium3DTileset.fromUrl(
+      `http://localhost:8003/${subdirectory}/tileset.json`,
+      {
+        debugShowBoundingVolume: true,
+      }
+    )
   );
   currentTileset.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
     Cesium.Cartesian3.fromDegrees(-75.152325, 39.94704, 0)
@@ -134,8 +136,8 @@ function setInfoText(infoText) {
 function createSampleOption(name, directory, infoText) {
   return {
     text: name,
-    onselect: function () {
-      createTileset(directory);
+    onselect: async function () {
+      await createTileset(directory);
       setInfoText(infoText);
     },
   };