<think>我们正在使用Vue3集成
Cesium来加载3D
模型。根据引用[1]和[2]，我们可以通过Entity或3D Tileset来
添加模型。同时，注意
模型的位置设置，特别是高度参数。
步骤：
1. 安装
Cesium和Vue3集成所需的包。
2. 在Vue组件中初始化
Cesium Viewer。
3. 使用Entity或3D Tileset加载
模型。
这里我们以使用Entity
添加glTF模型为例。
首先，确保已经安装了
cesium和vue-
cesium（一个Vue3的
Cesium封装库）:
```bash
npm install
cesium vue-
cesium
```
然后，在Vue组件中：
```vue
<template>
<div id="
cesium-container">
<vc-viewer @ready="onViewerReady"></vc-viewer>
</div>
</template>
<script>
import { ref } from 'vue'
import * as
Cesium from '
cesium'
export default {
setup() {
const onViewerReady = ({
Cesium, viewer }) => {
// 设置地形
viewer.terrainProvider =
Cesium.createWorldTerrain()
//
添加一个3D
模型
const position =
Cesium.Cartesian3.fromDegrees(120.0, 30.0, 0) // 经度、纬度、高度（米）
const heading =
Cesium.Math.toRadians(0) // 朝向（弧度）
const pitch = 0
const roll = 0
const orientation =
Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll)
viewer.entities.add({
name: 'MyModel',
position: position,
orientation: orientation,
model: {
uri: '/path/to/your/model.
gltf', //
模型路径，可以是绝对路径或相对路径（注意：在Vue中通常放在public目录下）
scale: 1.0, // 缩放比例
minimumPixelSize: 128, //
模型最小像素大小（避免太小看不见）
maximumScale: 20000, // 最大缩放比例
show: true
}
})
// 定位到
模型
viewer.camera.flyTo({
destination: position,
orientation: {
heading: heading,
pitch:
Cesium.Math.toRadians(-20), // 俯
视角度
roll: roll
}
})
}
return {
onViewerReady
}
}
}
</script>
<style>
#
cesium-container {
width: 100%;
height: 100vh;
}
</style>
```
注意：
-
模型路径：如果
模型放在public目录下，可以直接使用`/model.
gltf`，否则需要正确的路径。
- 高度设置：根据引用[2]，`
Cesium.Cartesian3.fromDegrees`的第三个参数是离地高度。如果
模型本身已经在地面，且建模时中心点设置在底部，则高度设为0即可贴地。否则，可能需要调整高度或建模设置。
- 朝向：使用`orientation`属性设置
模型的旋转角度，这里我们使用四元数表示。
另外，如果加载的是3D Tileset，可以使用`
Cesium.
Cesium3DTileset`：
```javascript
const tileset = new
Cesium.
Cesium3DTileset({
url: '/path/to/your/tileset/tileset.json'
})
viewer.scene.primitives.add(tileset)
```
请根据实际需求选择加载方式。
§§相关问题§§
1. 如何在
Cesium中调整3D
模型的位置和旋转角度？
2. 如何解决
Cesium加载3D
模型时出现的跨域问题？
3. 在Vue3中集成
Cesium有哪些注意事项？</think>在 Vue3 项目中集成
Cesium 并加载 3D
模型，可以通过以下步骤实现：
### 步骤 1：安装依赖
```bash
npm install
cesium vue-
cesium
```
### 步骤 2：配置
Cesium
在 `src/main.js` 中：
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import * as
Cesium from '
cesium'
import Vue
Cesium from 'vue-
cesium'
// 设置
Cesium 静态资源路径（重要！）
window.
CESIUM_BASE_URL = '/node_modules/
cesium/Build/
Cesium/'
const app = createApp(App)
app.use(Vue
Cesium, {
cesiumPath: 'https://unpkg.com/
cesium/Build/
Cesium/
Cesium.js',
accessToken: 'YOUR_MAPBOX_TOKEN' // 可选，地形服务需要
})
app.mount('#app')
```
### 步骤 3：创建
Cesium 组件
在 `src/components/
CesiumViewer.vue`：
```vue
<template>
<vc-viewer :animation="false" :timeline="false" @ready="onViewerReady">
<!-- 加载 3D
模型 -->
<vc-entity
ref="modelEntity"
:position="position"
:model="modelOptions"
:orientation="orientation">
</vc-entity>
</vc-viewer>
</template>
<script>
import { ref } from 'vue'
import * as
Cesium from '
cesium'
export default {
setup() {
//
模型位置（经度, 纬度, 高度）
const position = ref(
Cesium.Cartesian3.fromDegrees(120.0, 30.0, 100))
//
模型朝向（重要！）
const orientation = ref(
Cesium.Transforms.headingPitchRollQuaternion(
position.value,
new
Cesium.HeadingPitchRoll(0, 0, 0)
))
//
模型配置
const modelOptions = ref({
uri: '/models/your_model.
gltf', //
模型路径（放在public目录）
scale: 1.0, // 缩放比例
minimumPixelSize: 128, // 最小可见像素
maximumScale: 2, // 最大缩放限制
show: true
})
const onViewerReady = ({
Cesium, viewer }) => {
//
添加地形和
底图
viewer.terrainProvider =
Cesium.createWorldTerrain()
viewer.imageryLayers.addImageryProvider(
new
Cesium.ArcGisMapServerImageryProvider({
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
})
)
// 聚焦到
模型
viewer.camera.flyTo({
destination: position.value,
orientation: {
heading:
Cesium.Math.toRadians(0),
pitch:
Cesium.Math.toRadians(-30),
roll: 0
}
})
}
return { position, orientation, modelOptions, onViewerReady }
}
}
</script>
<style scoped>
vc-viewer {
width: 100%;
height: 100vh;
}
</style>
```
### 关键注意事项：
1. **
模型路径**：
- 将
模型文件放在 `public/models/` 目录
- 使用相对路径 `/models/your_model.
gltf`
2. **贴地设置**：
- 高度设为 0：`fromDegrees(lng, lat, 0)`
- 建模时确保
模型底部为原点（否则需调整高度）[^2]
3. **
模型朝向**：
```javascript
// 正确设置
模型旋转（heading/yaw, pitch, roll）
orientation.value =
Cesium.Transforms.headingPitchRollQuaternion(
position.value,
new
Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(0), // 偏航角
Cesium.Math.toRadians(0), // 俯仰角
Cesium.Math.toRadians(0) // 翻滚角
)
)
```
4. **性能优化**：
```javascript
modelOptions.value = {
...
silhouetteColor:
Cesium.Color.RED, // 轮廓高亮
colorBlendMode:
Cesium.ColorBlendMode.MIX // 颜色混合模式
}
```
### 常见问题解决：
- **跨域问题**：在 `vite.config.js`
添加代理：
```javascript
server: {
proxy: {
'/resources': {
target: 'https://your-tileset-server.com',
changeOrigin: true
}
}
}
```
- **白屏问题**：确保正确设置 `
CESIUM_BASE_URL`
- **
模型位置偏移**：使用建模软件调整
模型原点
> 示例代码加载的 3D
模型通过 Entity API 实现，适合单个
模型加载。对于大规模场景（如城市建筑群），建议使用 3D Tiles 技术[^1]。
最低0.47元/天 解锁文章
扫一扫
296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
