Added a sandcastle example for 3D Tiles Gaussian Splatting

CesiumGS · Jan 8, 2025 · eb1db94 · eb1db94
1 parent 7142df3
commit eb1db94
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 0 deletions.
diff --git a/Apps/Sandcastle/gallery/3D Tiles Gaussian Splatting.html b/Apps/Sandcastle/gallery/3D Tiles Gaussian Splatting.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
+    />
+    <meta
+      name="description"
+      content="Use Viewer to start building new applications or easily embed Cesium into existing applications."
+    />
+    <meta name="cesium-sandcastle-labels" content="Showcases, 3D Tiles" />
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script type="module" src="../load-cesium-es6.js"></script>
+  </head>
+  <body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+    <style>
+      @import url(../templates/bucket.css);
+    </style>
+    <div id="cesiumContainer" class="fullSize"></div>
+    <div id="loadingOverlay"><h1>Loading...</h1></div>
+    <div id="toolbar"></div>
+    <script id="cesium_sandcastle_script">
+      window.startup = async function (Cesium) {
+        "use strict";
+        //Sandcastle_Begin
+        Cesium.Ion.defaultAccessToken =
+          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MWEyNWI4NS02ZWVmLTQyZTEtOTRjZi02NjljOWNhOWViNGEiLCJpZCI6MTQwNTg1LCJpYXQiOjE3MzYzNjg4OTR9.rIAEC387JLBYOPt3w1fliKTWZgTGCQYJlG8o5HJsTwY";
+        const viewer = new Cesium.Viewer("cesiumContainer");
+        viewer.scene.debugShowFramesPerSecond = true;
+
+        const ORBIT_RANGE_FACTOR = 3;
+        const ORBIT_PITCH_DIVIDEND = 8;
+
+        let cellTowerTileset;
+        Cesium.Cesium3DTileset.fromIonAssetId(2917325, {
+          maximumScreenSpaceError: 1,
+        }).then((tileset) => {
+          cellTowerTileset = tileset;
+          viewer.scene.primitives.add(cellTowerTileset);
+          setupCamera();
+        });
+        let startTime;
+        let isRunning = false;
+
+        function setupCamera() {
+          const boundingSphere = cellTowerTileset.boundingSphere;
+          const heading = 0;
+          const range = boundingSphere.radius * ORBIT_RANGE_FACTOR;
+          const pitch = -Math.PI / ORBIT_PITCH_DIVIDEND;
+
+          viewer.camera.lookAt(
+            boundingSphere.center,
+            new Cesium.HeadingPitchRange(heading, pitch, range),
+          );
+
+          return true;
+        }
+
+        function startCameraOrbit() {
+          if (!setupCamera()) {
+            return;
+          }
+          startTime = performance.now();
+          isRunning = true;
+          requestAnimationFrame(cameraOrbitTickCallback);
+        }
+
+        function cameraOrbitTickCallback(timestamp) {
+          if (!isRunning) {
+            return;
+          }
+
+          const boundingSphere = cellTowerTileset.boundingSphere;
+          const elapsedSeconds = (timestamp - startTime) / 1000;
+          const heading = (elapsedSeconds / 15) * Math.PI * 2;
+
+          const range = boundingSphere.radius * ORBIT_RANGE_FACTOR;
+          const pitch = -Math.PI / ORBIT_PITCH_DIVIDEND;
+
+          viewer.camera.lookAt(
+            boundingSphere.center,
+            new Cesium.HeadingPitchRange(heading, pitch, range),
+          );
+
+          requestAnimationFrame(cameraOrbitTickCallback);
+        }
+
+        Sandcastle.addToolbarButton("Start Orbit", startCameraOrbit);
+        Sandcastle.addToolbarButton("Stop Orbit", () => {
+          isRunning = false;
+        });
+        //Sandcastle_End
+        Sandcastle.finishedLoading();
+      };
+      if (typeof Cesium !== "undefined") {
+        window.startupCalled = true;
+        window.startup(Cesium).catch((error) => {
+          "use strict";
+          console.error(error);
+        });
+      }
+    </script>
+  </body>
+</html>
diff --git a/Apps/Sandcastle/gallery/3D Tiles Gaussian Splatting.jpg b/Apps/Sandcastle/gallery/3D Tiles Gaussian Splatting.jpg