vue2项目使用cesium加载gltf文件

### 实现 Vue2 中集成 Cesium 并加载 GLTF 文件 在 Vue2 项目中集成了 Cesium 后，可以按照如下方式来加载 GLTF 文件： #### 安装依赖库 为了能够在 Vue2 项目里使用 Cesium，需先安装 `cesium` 库。 ```bash npm install cesium --save ``` #### 配置 Webpack 解析 Cesium 资源路径 由于 Cesium 的资源文件较多，在 webpack.config.js 或 vue.config.js 中配置别名解析以便于访问这些静态资源。 ```javascript const path = require('path'); module.exports = { configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src'), Cesium$: path.join(__dirname, './node_modules/cesium/Source') } }, module: { unknownContextCritical: false, unknownContextRegExp: /\/cesium\//, exprContextCritical: false, exprContextRegExp: /\/cesium\// } } }; ``` #### 初始化 Cesium Viewer 组件并设置样式 创建一个新的组件用于展示 Cesium 地图视图，并通过 `<script>` 标签引入 Cesium CSS 和 JS 文件。 ```html <template> <div id="app"> <!-- 添加一个容器 --> <div ref="viewerContainer" class="fullSize"></div> </div> </template> <script> import * as Cesium from "cesium"; export default { name: "CesiumViewer", mounted() { this.init(); }, methods: { init() { const viewer = new Cesium.Viewer(this.$refs.viewerContainer); // 设置默认视角位置 let camera = viewer.camera; camera.setView({ destination : Cesium.Cartesian3.fromDegrees(-75.0, 40.0, 1000), orientation : { heading : Cesium.Math.toRadians(0), // East, with North at top +y axis pitch : Cesium.Math.toRadians(-90), // Look down roll : 0.0 // No roll. } }); } } } </script> <style scoped> .fullSize{ width: 100%; height: 100vh; /* 使用整个浏览器窗口的高度 */ } </style> ``` #### 创建方法以加载特定的 GLTF 模型实例集合 定义函数用来向场景添加指定 URL 下的 `.gltf` 文件作为三维模型对象[^2]。 ```javascript function addGlbCollection(viewer, data) { var modelInstances = getModelPostInstances(data); var instanceCollection = viewer.scene.primitives.add( new Cesium.ModelInstanceCollection({ url: "../assets/CesiumAir/CesiumAir.gltf", // 修改为实际路径 instances: modelInstances }) ); } // 假设有一个获取模型姿态数据的方法 function getModelPostInstances(data){ return [ // 这里返回具体的实例化参数列表... ]; } ``` 上述代码片段展示了如何在一个基于 Vue2 构建的应用程序内利用 Cesium 来渲染来自本地存储或其他来源处获得的 GLTF 格式的三维几何图形。需要注意的是，具体实现细节可能会依据项目的实际情况有所不同，比如所使用的版本差异以及个人偏好等因素的影响。