cesiumdemo
/
index4.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 czml = [
          {
            id: "document",
            name: "box",
            version: "1.0",
          },
          {
            id: "launchvehicle",
            name: "launchvehicle box",
            position: {
              cartographicDegrees: [-114.0, 40.0, 300000.0],
            },
            model: {
              //gltf: "https://assets.agi.com/models/launchvehicle.glb",
              gltf: "./assets/launchvehicle.glb",
              scale: 2.0,
              minimumPixelSize: 128,
              runAnimations: false,
              color: {
                rgba: [102, 255, 255, 128],
              },
            },
          },
          {
            id: "airOne",
            name: "airOne box with black outline",
            position: {
              cartographicDegrees: [-107.0, 40.0, 300000.0],
            },
            model: {
              //gltf: "https://assets.agi.com/models/launchvehicle.glb",
              gltf: "./assets/SampleData/models/CesiumAir/Cesium_Air.glb",
              scale: 2.0,
              minimumPixelSize: 128,
              runAnimations: false,
              color: {
                rgba: [255, 0, 0, 128],
              },
            },
          },
          {
            id: "airTwo",
            name: "airTwo box with black outline",
            position: {
              cartographicDegrees: [-100.0, 40.0, 300000.0],
            },
            model: {
              //gltf: "https://assets.agi.com/models/launchvehicle.glb",
              gltf: "./assets/SampleData/models/CesiumAir/Cesium_Air.glb",
              scale: 2.0,
              minimumPixelSize: 128,
              runAnimations: false,
              color: {
                rgba: [255, 255, 0, 128],
              },
            },
          },
        ];
        return czml;
      }
      function setRotate(entity, rotate) {
        console.log(entity, rotate);
        const { rotateX, rotateY, rotateZ } = rotate;
        const origin = entity.position.getValue();
        console.log(origin, "xxxx");
        const heading = Cesium.Math.toRadians(this.rotateX);
        const pitch = Cesium.Math.toRadians(this.rotateY);
        const roll = Cesium.Math.toRadians(this.rotateZ);

        const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
        const orientation = Cesium.Transforms.headingPitchRollQuaternion(
          origin,
          hpr
        );
        entity.orientation = orientation;
      }

      const params = {
        tx: -121, //模型中心X轴坐标（经度，单位：十进制度）
        ty: 45, //模型中心Y轴坐标（纬度，单位：十进制度）
        tz: 300000, //模型中心Z轴坐标（高程，单位：米）
        rx: 90, //X轴（经度）方向旋转角度（单位：度）
        ry: 90, //Y轴（纬度）方向旋转角度（单位：度）
        rz: 90, //Z轴（高程）方向旋转角度（单位：度）
      };

      function update3dtilesMaxtrix(tileset) {
        //旋转
        var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
        var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
        var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
        var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
        var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
        var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
        //平移
        var position = Cesium.Cartesian3.fromDegrees(
          params.tx,
          params.ty,
          params.tz
        );
        var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
        //旋转、平移矩阵相乘
        Cesium.Matrix4.multiply(m, rotationX, m);
        Cesium.Matrix4.multiply(m, rotationY, m);
        Cesium.Matrix4.multiply(m, rotationZ, m);
        //赋值给tileset
        tileset.modelMatrix = m;
      }

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

        const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
        dataSourcePromise.then((dataSource) => {
          const entity = dataSource.entities.getById("launchvehicle");
          console.log(entity);
          //setRotate(entity, { rotateX: 100, rotateY: 100, rotateZ: 100 });
          //update3dtilesMaxtrix(entity);
          setModelMatrix(entity);
        });
        viewer.dataSources.add(dataSourcePromise);
        viewer.zoomTo(dataSourcePromise);
      }

      function setModelMatrix(entity) {
        console.log(entity.modelMatrix, "aaaaaa");
        const params = {
          height: 300000.0,
          heading: 0.0,
          pitch: Cesium.Math.toRadians(10.0),
          roll: Cesium.Math.toRadians(-20.0),
        };
        //const height = Cesium.defaultValue(params.height, 0.0);
        const heading = Cesium.defaultValue(params.heading, 0.0);
        const pitch = Cesium.defaultValue(params.pitch, 0.0);
        const roll = Cesium.defaultValue(params.roll, 0.0);
        var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

        var origin = Cesium.Cartesian3.fromDegrees(-114, 40, params.height);
        var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
          origin,
          hpr
        );
        entity.modelMatrix = modelMatrix;
      }
      startUp();
    </script>
  </body>
</html>