cesium glb模型参数动态修正工具

在cesium中加载glb模型时需要反复调整参数，为了方便编写了一个页面辅助模型位置修正；现分享给大家，不足之处请包涵

组件页面如下：

 组件完整代码如下：

<template>
  <div id="glbToolBar" v-if="glbToolBarIsShow">
    <table style="text-align: right;">
      <tr>
        <td colspan="2" style="text-align: left">
          <span style="font-size: 18px; font-weight: 600;">GLB/GLTF模型修正</span>
          <div class="closerGlb" @click="handCloserGlb"></div>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <div
            style="height: 4px;background-color: rgba(29,164,220,0.6);margin: 4px;"
          ></div>
        </td>
      </tr>
      <tr>
        <td>经度：</td>
        <td>
          <el-input-number
            class="inputNumWidthGlb"
            v-model="modelX"
            :min="-180.0"
            :max="180.0"
            :step="0.00001"
            @change="handlInputGlb"
          ></el-input-number>
        </td>
      </tr>
      <tr>
        <td>纬度：</td>
        <td>
          <el-input-number
            class="inputNumWidthGlb"
            v-model="modelY"
            :min="-180.0"
            :max="180.0"
            :step="0.00001"
            @change="handlInputGlb"
          ></el-input-number>
        </td>
      </tr>
      <tr>
        <td>高程：</td>
        <td>
          <el-input-number
            class="inputNumWidthGlb"
            v-model="modelZ"
            :max="9999"
            :min="-2000"
            :step="1"
            @change="handlInputGlb"
          ></el-input-number>
        </td>
      </tr>
      <tr>
        <td>缩放比例：</td>
        <td>
          <el-input-number
            class="inputNumWidthGlb"
            v-model="glbScale"
            :max="2"
            :min="0"
            :step="0.001"
            @change="handlInputGlb"
          ></el-input-number>
        </td>
      </tr>
      <tr>
        <td>航向角度：</td>
        <td>
          <el-input-number
            class="inputNumWidthGlb"
            v-model="setHeading"
            :max="180"
            :min="-180"
            :step="1"
            @change="handlInputGlb"
          ></el-input-number>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import common3D from "@/mapUtils/common3D";

export default {
  name: "glbUpdate",
  data() {
    return {
      glbToolBarIsShow: false,
      modelX: 111.214975,
      modelY: 39.526478,
      modelZ: 1040,
      glbScale: 0.100,
      raoteAngleX: 6.0,
      raoteAngleY: -4.0,
      setHeading: 90.14
    };
  },
  methods: {
    openGlbToolBar() {
      if (!window.mainmodel){
         this.$message({
          message: '提示：当前默认加载的不是glb/gltf模型，不能对模型修正！',
          type: 'warning'
        });
        return
      }
        this.glbToolBarIsShow = true;
    },

    handlInputGlb() {
      if (window.mainmodel) this.setGlbModelRoate();
    },

    handCloserGlb() {
      this.glbToolBarIsShow = false;
    },

    setGlbModelRoate() {
      var opt = {
        tx: Number(this.modelX),
        ty: Number(this.modelY),
        tz: Number(this.modelZ),
        rx: Number(this.raoteAngleX),
        ry: Number(this.raoteAngleY),
        rz: Number(this.setHeading)
      };
      if (window.mainmodel) {
        const position = Cesium.Cartesian3.fromDegrees(
          opt.tx,
          opt.ty,
          opt.tz
        )
        // 弧度的航向分量。
        const heading = Cesium.Math.toRadians(opt.rz)
        // 弧度的螺距分量。
        const pitch = 0
        // 滚动分量（以弧度为单位）
        const roll = 0
        // Heading Pitch Roll旋转表示为航向，俯仰和滚动。围绕Z轴。节距是绕负y轴的旋转。滚动是关于正x轴。
        const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
        const orientation = Cesium.Transforms.headingPitchRollQuaternion(
          position,
          hpr
        )
        window.mainmodel.position = position
        window.mainmodel.orientation = orientation
        window.mainmodel.model.scale = Number(this.glbScale)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.closerGlb {
  text-decoration: none;
  position: absolute;
  top: 20px;
  right: 10px;
  z-index: 20;
}
.closerGlb:after {
  content: "\e60b";
  font-family: "iconfont";
  font-size: 22px;
  color: rgba($color: gray, $alpha: 0.8);
}

#glbToolBar {
  color: rgba(29, 164, 220, 0.9);
  background: rgba(34, 69, 91, 0.7);
  border-radius: 6px;
  padding: 10px;

  .closerGlb {
    top: 1vh;
    right: 0.6vw;
    cursor: pointer;
  }

  /deep/ .inputNumWidthGlb {
    width: 140px;
    .el-input__inner {
      height: 28px;
      line-height: 28px;
      padding: 0px 6px;
      background: #104c66bd;
      color: #cef2ff;
      font-size: 12px;
      border: 0px;
    }
    .el-input-number__decrease,
    .el-input-number__increase {
      background: #104c66;
      color: rgba(255, 255, 255, 0.8);
      border-right: 0px;
      border-left: 0px;
      font-size: 14px;
      top: 4px;
    }
  }

  /deep/ .el-button {
    background: rgba(18, 167, 204, 0.52);
    color: #cef2ff;
    border: 0px;
  }

  /deep/ .el-slider {
    height: 32px;
    .el-slider__runway {
      margin: 10px 0px;
      background-color: rgba(29, 164, 220, 0.6);
    }
  }

  /deep/ .el-select {
    width: 80px;
    .el-input__inner {
      height: 28px;
      line-height: 28px;
      padding: 0px 6px;
    }
  }
}

#glbToolBar td {
  padding: 4px 2px;
}
</style>

以上为学习cesium时所总结，仅供新手学习参考！