cesiumdemo
/
indexmodel.html

<!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.0" />
    <title>Document</title>
    <script src="./script/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./script/Cesium/Widgets/widgets.css" />
    <style>
      html,
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer" style="width: 100%"></div>
    <script>
      const viewer = new Cesium.Viewer("cesiumContainer", {
        baseLayerPicker: false,
        navigationHelpButton: false,
        sceneModePicker: false,
      });

      function getCzml() {
        const list = [
          "./assets/redCard.glb",
          "./assets/launchvehicle.glb",
          "./assets/SampleData/models/CesiumAir/Cesium_Air.glb",
          "./assets/SampleData/models/CesiumMan/Cesium_Man.glb",
          "./assets/SampleData/models/ShadowTester/Shadow_Tester_4.glb",
          "./assets/SampleData/models/ShadowTester/Shadow_Tester_2.glb",
          "./assets/SampleData/models/ShadowTester/Shadow_Tester_3.glb",
          "./assets/SampleData/models/ShadowTester/Shadow_Transparent.glb",
          "./assets/SampleData/models/ShadowTester/Shadow_Tester_Point.glb",
          "./assets/SampleData/models/ShadowTester/Shadow_Tester.glb",
          "./assets/SampleData/models/CesiumDrone/CesiumDrone.glb",
          "./assets/SampleData/models/WoodTower/Wood_Tower.glb",
          "./assets/SampleData/models/GroundVehicle/GroundVehicle.glb",
          "./assets/SampleData/models/Pawns/Pawns.glb",
          "./assets/SampleData/models/ParcLeadMine/ParcLeadMine.glb",
          "./assets/SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
          "./assets/SampleData/models/CesiumBalloon/CesiumBalloon.glb",
        ];
        const czml = [
          {
            id: "document",
            name: "box",
            version: "1.0",
          },
        ];
        list.map((item, index) => {
          const limit = index * 15;
          const id = item.split("/")[item.split("/").length - 1];
          czml.push({
            id: id,
            name: `${id} box`,
            position: {
              cartographicDegrees: [-114.0 - limit, 40.0, 300000.0],
            },
            model: {
              gltf: item,
              scale: 2.0,
              minimumPixelSize: 128,
              runAnimations: false,
              color: {
                rgba: [102, 255, 255, 128],
              },
            },
          });
        });
        console.log(czml);

        return czml;
      }

      function startUp() {
        console.log("x");
        const czml = getCzml();

        const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
        viewer.dataSources.add(dataSourcePromise);
        viewer.zoomTo(dataSourcePromise);
      }
      startUp();
    </script>
  </body>
</html>