Cesium中如何加载单个模型

发布时间：2022-01-13 16:51:47 作者：小新
来源：亿速云阅读：346

# Cesium中如何加载单个模型

## 引言

Cesium作为一款开源的3D地球可视化引擎，广泛应用于地理信息系统(GIS)、虚拟仿真、智慧城市等领域。加载3D模型是Cesium的核心功能之一，本文将详细介绍如何在Cesium中加载单个3D模型，涵盖格式支持、基础加载方法、参数配置以及常见问题解决方案。

---

## 一、支持的3D模型格式

Cesium主要支持以下3D模型格式：

1. **glTF/GLB**（推荐格式）
   - 专为Web设计的轻量级格式
   - 支持PBR材质、骨骼动画等特性
   - GLB是glTF的二进制版本

2. **COLLADA (.dae)**
   - 通过转换工具可转为glTF使用
   - 原生支持有限

3. **OBJ** 
   - 需配合材质文件使用
   - 建议转换为glTF以获得更好性能

> 最佳实践：使用glTF 2.0格式，可通过[Blender](https://www.blblender.org/)或[在线转换工具](https://modelviewer.dev/)将其他格式转换为glTF。

---

## 二、基础加载方法

### 2.1 使用Cesium.Entity API

```javascript
const viewer = new Cesium.Viewer('cesiumContainer');

const modelEntity = viewer.entities.add({
    name: 'MyModel',
    position: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100),
    model: {
        uri: './models/myModel.glb',
        minimumPixelSize: 128,  // 最小显示像素
        maximumScale: 20000     // 最大缩放比例
    }
});

// 相机飞向模型
viewer.zoomTo(modelEntity);

2.2 使用Cesium.Model.fromGltf

const position = Cesium.Cartesian3.fromDegrees(116.4, 39.9);
const modelMatrix = Cesium.Matrix4.fromTranslation(position);

const model = Cesium.Model.fromGltf({
    url: './models/myModel.glb',
    modelMatrix: modelMatrix,
    scale: 10.0
});

viewer.scene.primitives.add(model);

三、关键参数配置

参数	类型	说明
`uri`	String	模型文件路径（必需）
`scale`	Number	缩放比例（默认1.0）
`minimumPixelSize`	Number	模型最小显示像素
`maximumScale`	Number	最大缩放限制
`show`	Boolean	是否显示（默认true）
`color`	Color	模型颜色混合
`colorBlendMode`	Enum	颜色混合模式（HIGHLIGHT/MIX/REPLACE）
`shadows`	Enum	阴影模式（ENABLED/DISABLED/CAST_ONLY）

示例：配置彩色高亮效果

model: {
    uri: 'model.glb',
    color: Cesium.Color.RED.withAlpha(0.5),
    colorBlendMode: Cesium.ColorBlendMode.MIX
}

四、高级功能实现

4.1 模型动画控制

// 获取模型后访问动画资源
model.readyPromise.then(function(model) {
    const animations = model.activeAnimations;
    animations.add({
        name: 'animation_1',
        loop: Cesium.ModelAnimationLoop.REPEAT
    });
});

4.2 点击事件处理

viewer.screenSpaceEventHandler.setInputAction(
    function(movement) {
        const picked = viewer.scene.pick(movement.endPosition);
        if (Cesium.defined(picked) {
            console.log('模型被点击', picked.id.name);
        }
    },
    Cesium.ScreenSpaceEventType.LEFT_CLICK
);

4.3 自定义着色器

model: {
    uri: 'model.glb',
    customShader: new Cesium.CustomShader({
        lightingModel: Cesium.LightingModel.PBR,
        fragmentShaderText: `
            void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
                material.diffuse = vec3(0.8, 0.2, 0.2);
            }
        `
    })
}

五、常见问题解决

5.1 模型位置偏移

现象：模型未出现在预期坐标
解决方案： 1. 检查坐标系转换是否正确 2. 使用Cesium.Transforms.eastNorthUpToFixedFrame建立局部坐标系 3. 在建模软件中重置模型中心点

5.2 材质显示异常

现象：纹理丢失或发黑
排查步骤： 1. 确认纹理文件路径正确 2. 检查控制台是否有404错误 3. 使用官方glTF验证工具检查模型

5.3 性能优化建议

使用model.maximumScreenSpaceError = 2控制细节层次
对静态模型启用allow3DOnly: true
复杂模型建议使用3D Tiles规范

六、完整示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cesium模型加载示例</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
    <div id="cesiumContainer" style="width:100%; height:100%;"></div>
    <script>
        Cesium.Ion.defaultAccessToken = 'your_access_token';
        
        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrainProvider: Cesium.createWorldTerrain()
        });

        // 加载模型
        const airplane = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 1000),
            model: {
                uri: 'https://assets.agi.com/models/airplane/CesiumAir/Cesium_Air.glb',
                scale: 2.0,
                minimumPixelSize: 64
            }
        });

        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 2000)
        });
    </script>
</body>
</html>

结语

本文详细介绍了Cesium加载单个模型的全流程方法。实际开发中还需注意： 1. 模型文件应部署在支持CORS的服务器上 2. 对于生产环境建议使用Cesium ion服务托管模型 3. 移动端设备需特别注意模型面数控制

通过合理配置参数和优化模型资源，可以在Cesium中实现高质量的3D模型展示效果。 “`

注：实际使用时需要： 1. 替换示例中的access token 2. 确保模型路径正确 3. 根据Cesium版本调整API（本文基于1.95版本）