【Cesium学习（六）】Cesium加载3D模型（3D tiles和glTF模型）_cesium加载模型

前言

前面我们学习到了绘制基本的形状，但是Cesium还可以加载3D模型，因为像高德地图这种的技术来加载大型复杂的建筑模型性能不加，所有只能想Cesium这种专门做3D地图的技术。接下来就学习一下如何加载模型。

技术方案

Cesium目前支持两种模型方案，一个是使用3D tiles， 另一个是加载glTF模型，3D tiles是适用于展示大区域面积的建筑模型，而glTF模型是加载单个独立模型。

实现

一、3D tiles 实现

什么是3D tiles

3DTiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集, 3DTiles数据集以分块、分级渲染，将大数据量三维数据以分块，分层的形式组织起来，可以大量减轻浏览器和GPU的负担是一个优秀的,并且格式公开的数据格式。3D Tiles将用于流式传输3D内容,包括建筑物,树木,点云和矢量数据。

准备模型

这里可以使用官网库中的模型，也是找一个tileset.json的网络地址模型或者本地地址模型。

代码实现

let viewer = new Cesium.Viewer('cesiumContainer')
let tileset; //设置一个变量来存放通过3DTiles创建的模型
try {
    tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: 'https://invest.zjw.ningbo.gov.cn/BIM/yzddgj/5/tileset.json' }
    viewer.scene.globe.depthTestAgainstTerrain = true;
    tileset.readyPromise.then(function (tileset) {
        let boundingSphere = tileset.boundingSphere; // 模型的范围
        let cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center); // 从笛卡尔位置创建一个新的位置实例（返回的是一个经纬度的）
        let surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); // 以经纬度的值来返回Cartesian3(xyz)的位置 ，/
        let offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 50); // 以经纬度的值来返回Cartesian3(xyz)的位置 ，//>
        let translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); // 计算两个笛卡尔的分量差异。
        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        viewer.zoomTo(tileset);
    });
} catch (error) {
    console.log(`Error loading tileset: ${error}`);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

运行

二、glTF模型实现

GLTF代表Graphics Language Transmission Format（图形语言传输格式）。这种跨平台格式已成为Web上的3D对象标准。它由OpenGL和Vulkan背后的3D图形标准组织Khronos所定义，这使得GLTF基本上成为3D模型的JPG格式：Web导出的通用标准。

准备模型

在下载的Cesium文件里面，可以找到一个models文件，里面都是模型

代码实现

gltf模型有两种实现代码实现，一是使用前面的entity方式来加载，还有一个是通过CZML方式来加载模型。
一、entity方式

var entity = viewer.entities.add({
    id: 'myEntity',
    position: position, //模型的位置
    orientation: orientation_air,
    model: {
        uri: require('../../public/models/CesiumAir/Cesium_Air.glb'),
        minimumPixelSize: 500,
        maximumScale: 10000,
        show: true,
    },
});
// 让摄像机视口快速定位到模型位置
 viewer.trackedEntity = entity;
1
2
3
4
5
6
7
8
9
10
11
12
13

二、CZML方式

        name: '3DModel',
        version: '1.0',
    },
    {
        id: 'airplane_model',
        name: 'airplane',
        position: {
            cartographicDegrees: [-77, 37, 10000],
        },
        model: {
            gltf: require('../../public/models/CesiumAir/Cesium_Air.glb'),
            scale: 2.0,
            minimumPixelSize: 128,
        },
    },
];
//> 添加模型
const dataSourcePromise = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
dataSourcePromise
    .then(function (dataSource) {
        viewer.trackedEntity = dataSource.entities.getById('airplane_model');
    })
    .catch(function (error) {
        console.log(error);
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

运行