cesium加载gltf模型

cesium加载gltf模型

一、采用vue-cesium；在项目里加载依赖包。命令如下：

npm i --save vue-cesium

　　在main.js中加入如下代码：

　　https://www.npmjs.com/package/vue-cesium

　　

　　在你的相关组件里加入如下代码:

　　

　　 

　　在index.html中引入相关css

　　<link rel="stylesheet" href="Cesium/Widgets/widgets.css" />

　　代码如下：

<vc-viewer>
      <vc-entity :description="description" :position="position">
        <vc-graphics-model :uri="uri" @ready="subReady"></vc-graphics-model>
      </vc-entity>
    </vc-viewer>

data () {
    return {
      position: { lng: 39.9942785653, lat: 116.3675724221 },
      uri: './data/scene.gltf',
      description: '你好 姚素素'
    };
  },

methods: {
    getJson () {
      this.$axios.get("api/");
    },
    subReady ({ Cesium, viewer, cesiumObject }) {
      viewer.zoomTo(viewer.entities)
    }
  }

第二种方法：

　　在index.html中引入相关css与cesium

　　在相关组件中引入如下代码，空间的隐藏自己根据需要看着办

 mounted () {
    let viewer = new Cesium.Viewer("cesiumContainer", {
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      baseLayerPicker: false,
      fullscreenButton: false,
      scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      navigationInstructionsInitiallyVisible: false,
      navigationHelpButton: false,
      animation: false,
      timeline: false,
      fulllscreenButtond: false,
      vrButton: false,
      infoBox: false,
      // 加载谷歌卫星影像
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
      })
    });
    //加载gltf格式数据到cesium
    var scene = viewer.scene;

    var position = Cesium.Cartesian3.fromDegrees(39.9942785653,116.3675724221, 0);
    var heading = Cesium.Math.toRadians(135);
    var pitch = 0;
    var roll = 0;
    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

    var entity = viewer.entities.add({
        position : position,
        orientation : orientation,
        model : {
            uri: "./data/scene.gltf",
            minimumPixelSize : 128,
            maximumScale : 20000
        }
    });
    viewer.trackedEntity = entity;
  },

第三种方法:

　　1.在index.html中引入

<link rel="stylesheet" href="Cesium/Widgets/widgets.css" />
<script src="Cesium/Cesium.js"></script>
//js最好在body底部引入

　　2.添加如下代码：

 mounted () {
    let viewer = new Cesium.Viewer("cesiumContainer", {
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      baseLayerPicker: false,
      fullscreenButton: false,
      scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      navigationInstructionsInitiallyVisible: false,
      navigationHelpButton: false,
      animation: false,
      timeline: false,
      fulllscreenButtond: false,
      vrButton: false,
      infoBox: false,
      // 加载谷歌卫星影像
      // imageryProvider: new Cesium.UrlTemplateImageryProvider({
      //   url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
      // })
    });

 var scene = viewer.scene;
    var entity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(
        114.20574928735117,
        22.321435975427892
      ),
      model: {
        uri: "./data/scene.gltf",
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        color: Cesium.Color.GAINSBORO,
        colorBlendAmount: 0.4
      }
    });

    viewer.camera.setView({
      destination: Cesium.Rectangle.fromDegrees(
        114.2044562729353,
        22.324313503282323,
        114.20933770113695,
        22.32079076841488
      )
    });
  },

　　相关控件自己根据需要进行控制

　　如果有不懂得，可以加群讨论854184700