cesium加载glb格式的3d模型

疆~

已于 2024-07-16 13:40:31 修改

阅读量3.3k

点赞数 3

分类专栏： Vue2 Cesium 文章标签： 3d 前端 javascript

于 2022-11-26 13:57:16 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/128008638

版权

Vue2 同时被 2 个专栏收录

196 篇文章 59 订阅

订阅专栏

Cesium

29 篇文章 67 订阅

订阅专栏

官方示例:Cesium Sandcastlehttps://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,数字地球,数字孪生https://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>