Cesium加载三维模型glTF文件-CFANZ编程社区

1、glTF文件简介

官网中，介绍了glTF是一种可以减少3D格式中与渲染无关的冗余数据并且在更加适合OpenGL簇加载的一种3D文件格式。glTF使用json格式进行描述，也可以编译成二进制的内容：bglTF。glTF可以包括场景、摄像机、动画等，也可以包括网格、材质、纹理，甚至包括了渲染技术（technique）、着色器以及着色器程序。同时由于json格式的特点，它支持预留一般以及特定供应商的扩展。

2、Cesium加载glTF方式

Cesium内置了fromGltf来加载gtTF格式的三维模型，具体方法如下：

var scene = viewer.scene
      var modelMatrix = this.Cesium.Transforms.eastNorthUpToFixedFrame(
        this.Cesium.Cartesian3.fromDegrees(110.62898254394531, 40.02804946899414, 6.0));        //gltf数据加载位置
      var model = scene.primitives.add(this.Cesium.Model.fromGltf({
        url: this.gltfUrl, //gltf文件的URL
        modelMatrix: modelMatrix,
        scale: 300.0     //放大倍数
      }));

3、基于Vue，webpack的Cesium加载glTF注意事项

(1) 需要配置gltf格式文件的加载方式为url-loader

     {
        // match all .gltf files
        test: /\.(gltf)$/,
        loader: 'url-loader'
      },

将gltf文件放置在static文件夹下

因为webpack处理静态资源的时候会将assert目录下的静态资源解析成模块依赖，构建的过程中会对文件对象进行重命名，生成一个新的url，但是可能因为一些其他的原因（我并未深究），加载模型的url与新生成的url可能不一致（猜测），导致模型找不到。而放置在static目录下的文件不会被打包处理，只是复制文件。

附上主要代码：

<template>
  <div id="cesiumContainer"></div>
</template>
<script type="text/javascript">
import gltfFile from "../../../../static/Duck.gltf"
export default {
  data() {
    return {
      gltfUrl: gltfFile
    }
  },
  computed: {},
  components: {},
  methods: {
    initMap() {
      let viewer = new this.Cesium.Viewer("cesiumContainer", {
        animation: false, //是否创建动画小器件，左下角仪表
        baseLayerPicker: false, //是否显示图层选择器
        fullscreenButton: false, //是否显示全屏按钮
        geocoder: false, //是否显示geocoder小器件，右上角查询按钮
        homeButton: false, //是否显示Home按钮
        infoBox: false, //是否显示信息框
        sceneModePicker: true, //是否显示3D/2D选择器,与scene3DOnly不能同时为true
        selectionIndicator: false, //是否显示选取指示器组件
        timeline: false, //是否显示时间轴
        navigationHelpButton: false, //是否显示右上角的帮助按钮
        scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        imageryProvider: new this.Cesium.createOpenStreetMapImageryProvider({
          credit: "",
          url: "https://a.tile.openstreetmap.org/"
        }) //图像图层提供者，仅baseLayerPicker设为false有意义
      })
      var scene = viewer.scene
      var modelMatrix = this.Cesium.Transforms.eastNorthUpToFixedFrame(
        this.Cesium.Cartesian3.fromDegrees(110.62898254394531, 40.02804946899414, 6.0));        //gltf数据加载位置
      var model = scene.primitives.add(this.Cesium.Model.fromGltf({
        url: this.gltfUrl, //gltf文件的URL
        modelMatrix: modelMatrix,
        scale: 300.0     //放大倍数
      }))
      viewer.camera.flyTo({
        destination: this.Cesium.Cartesian3.fromDegrees(110.62898254394531, 40.02804946899414, 6000.0)     //相机飞入点
      })
    },
  },
  mounted() {
    // 初始化底图
    this.initMap()
  }
};
</script>
<style>
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>