官方示例:Cesium Sandcastleicon-default.png?t=N7T8https://sandcastle.cesium.com/?src=3D%20Models.html&label=Tutorials

glb模型下载:https://sandcastle.cesium.com/SampleData/models/CesiumAir/Cesium_Air.glb 

在线预览:

WebGIS之家WebGIS之家,openlayers示例源码,cesium示例源码,openlayers在线调试预览,cesium在线调试预览,webgis,数字地球,数字孪生icon-default.png?t=N7T8https://www.webgishome.com/preview?id=139&example_name=glb_airplane&title=%E5%8A%A0%E8%BD%BDglb%E6%A8%A1%E5%9E%8B

 

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      infoBox: false,
      selectionIndicator: false, //关闭选择指示器
      shadows: true,
      shouldAnimate: true, //模型显示动画
    });
    viewer.entities.removeAll();

    const position = Cesium.Cartesian3.fromDegrees(
      -123.0744619,
      44.0503706,
      5000.0
    );
    const heading = Cesium.Math.toRadians(135);
    const pitch = 0;
    const roll = 0;
    const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(
      position,
      hpr
    );

    const entity = viewer.entities.add({
      name: "Cesium_Air",
      position: position,
      orientation: orientation,
      model: {
        uri: "Cesium_Air.glb",
        minimumPixelSize: 128,
        maximumScale: 20000,
      },
    });
    viewer.trackedEntity = entity;
  },
};
</script>

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐