随笔- 60 文章- 0 评论- 15 阅读- 14万

cesium加载gltf模型

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

1	`npm i --save vue-cesium`

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

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

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

　　在index.html中引入相关css

1	`<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中引入

1 2	`<link rel="stylesheet"` `href="Cesium/Widgets/widgets.css"` `/>` `<script src="Cesium/Cesium.js"></script><br>//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
     )
   });
 },