前言
前面我們學(xué)習(xí)到了繪制基本的形狀，但是Cesium還可以加載3D模型，因?yàn)橄窀叩碌貓D這種的技術(shù)來(lái)加載大型復(fù)雜的建筑模型性能不加，所有只能想Cesium這種專(zhuān)門(mén)做3D地圖的技術(shù)。接下來(lái)就學(xué)習(xí)一下如何加載模型。
技術(shù)方案
Cesium目前支持兩種模型方案，一個(gè)是使用3D tiles， 另一個(gè)是加載glTF模型，3D tiles是適用于展示大區(qū)域面積的建筑模型，而glTF模型是加載單個(gè)獨(dú)立模型。
實(shí)現(xiàn)
一、3D tiles 實(shí)現(xiàn)
什么是3D tiles
3DTiles數(shù)據(jù)集是cesium小組AnalyticlGraphics與2016年3月定義的一種數(shù)據(jù)集, 3DTiles數(shù)據(jù)集以分塊、分級(jí)渲染，將大數(shù)據(jù)量三維數(shù)據(jù)以分塊，分層的形式組織起來(lái)，可以大量減輕瀏覽器和GPU的負(fù)擔(dān)是一個(gè)優(yōu)秀的,并且格式公開(kāi)的數(shù)據(jù)格式。3D Tiles將用于流式傳輸3D內(nèi)容,包括建筑物,樹(shù)木,點(diǎn)云和矢量數(shù)據(jù)。
準(zhǔn)備模型
這里可以使用官網(wǎng)庫(kù)中的模型，也是找一個(gè)tileset.json的網(wǎng)絡(luò)地址模型或者本地地址模型。
代碼實(shí)現(xiàn)
let viewer = new Cesium.Viewer('cesiumContainer')
let tileset; //設(shè)置一個(gè)變量來(lái)存放通過(guò)3DTiles創(chuàng)建的模型
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); // 從笛卡爾位置創(chuàng)建一個(gè)新的位置實(shí)例（返回的是一個(gè)經(jīng)緯度的）
let surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); // 以經(jīng)緯度的值來(lái)返回Cartesian3(xyz)的位置 ，/
let offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 50); // 以經(jīng)緯度的值來(lái)返回Cartesian3(xyz)的位置 ，//>
let translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); // 計(jì)算兩個(gè)笛卡爾的分量差異。
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
viewer.zoomTo(tileset);
});
} catch (error) {
console.log(`Error loading tileset: ${error}`);
}
運(yùn)行
二、glTF模型實(shí)現(xiàn)
GLTF代表Graphics Language Transmission Format（圖形語(yǔ)言傳輸格式）。這種跨平臺(tái)格式已成為Web上的3D對(duì)象標(biāo)準(zhǔn)。它由OpenGL和Vulkan背后的3D圖形標(biāo)準(zhǔn)組織Khronos所定義，這使得GLTF基本上成為3D模型的JPG格式：Web導(dǎo)出的通用標(biāo)準(zhǔn)。
準(zhǔn)備模型
在下載的Cesium文件里面，可以找到一個(gè)models文件，里面都是模型
代碼實(shí)現(xiàn)
gltf模型有兩種實(shí)現(xiàn)代碼實(shí)現(xiàn)，一是使用前面的entity方式來(lái)加載，還有一個(gè)是通過(guò)CZML方式來(lái)加載模型。
一、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,
},
});
// 讓攝像機(jī)視口快速定位到模型位置
viewer.trackedEntity = entity;
二、CZML方式文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-734198.html
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);
});
運(yùn)行
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-734198.html
到了這里，關(guān)于【Cesium學(xué)習(xí)（六）】Cesium加載3D模型（3D tiles和glTF模型）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
