Cesium加载三维模型glTF文件

2024-01-19 00:47| 来源: 网络整理| 查看: 265

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目录下的文件不会被打包处理，只是复制文件。

附上主要代码：

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() } }; #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }

【本文地址】

公司简介

联系我们