cesium 之三維場景展示篇（附源碼下載下傳）

cesium支援加載三維模型的格式是.gltf或者.glb，一般我們制作三維模型都是從3dmax軟體，是以需要轉換;官網開源有轉換工具obj2gltf，具體的見這裡：https://github.com/AnalyticalGraphicsInc/obj2gltf，轉換需要安裝node環境，我這裡加載三維模型就是從obj轉換gltf來的

前言

cesium 官網的api文檔介紹位址cesium官網api，裡面詳細的介紹 cesium 各個類的介紹，還有就是線上例子：cesium 官網線上例子，這個也是學習 cesium 的好素材。

内容概覽

1.基于cesium 實作三維場景展示效果

2.源代碼 demo 下載下傳

本篇實作 cesium 三維場景展示，效果圖如下：

三維模型.gltf場景展示

傾斜攝影場景展示

1. 加載三維模型 gltf

• cesium 三維模型格式資料轉換

  cesium 支援加載三維模型的格式是 .gltf 或者 .glb，一般我們制作三維模型都是從 3dmax 軟體，是以需要轉換;官網開源有轉換工具 obj2gltf，具體的見這裡：https://github.com/AnalyticalGraphicsInc/obj2gltf，轉換需要安裝 node 環境，我這裡加載三維模型就是從 obj 轉換 gltf 來的；

• cesium 加載 gltf 展示代碼

*三維模型gltf配置資訊*/
MapConfig.Obj3D = {
position:Cesium.Cartesian3.fromDegrees(111.828682, 21.579571,3000),
models:[
{
id:"3D_gltf",
name : "測試3D模型",
position : Cesium.Cartesian3.fromDegrees(111.828682, 21.579571),
uri :"http://localhost:8180/cesium/3DModel/test/gltf_zapo/Object02.gltf"
},
{
id:"3D_gltf",
name : "測試3D模型",
position : Cesium.Cartesian3.fromDegrees(111.828682, 21.579571),
uri :"http://localhost:8180/cesium/3DModel/test/gltf_zapo/Object03.gltf"
},
{
id:"3D_gltf",
name : "測試3D模型",
position : Cesium.Cartesian3.fromDegrees(111.828682, 21.579571),
uri :"http://localhost:8180/cesium/3DModel/test/gltf_zapo/ZP_DB_04.gltf"
}]
}

$("#cesium3DModel").click(function(){
if(cesium.cesiumViewer.entities.length>0){
cesium.cesiumViewer.entities.removeAll();//清空所有模型
}
cesium.add3DGlft(MapConfig.Obj3D);
});

/**

* 加載GLFT模型


* @method add3DGlft


* @param


* @return


*/


add3DGlft: function (obj) {


//加載3dModel


this.add3DEntityModels(obj.models);


//跳轉位置


this.flyToPosition(obj.position);


},


/**
* 批量加載3D模型
* @method add3DEntityModels
* @param models 3D模型數組
* @return
*/
add3DEntityModels: function (models) {

if(models && models.length>0){

for(var i=0;i<models.length;i++){

var type = null;

if(models[i].type){

type = models[i].type;

}

var entity = this.cesiumViewer.entities.add({

name : models[i].name,
type : type,

position : models[i].position,

//orientation : orientation,

model : {

uri : models[i].uri,

}

});

}

}

}      

加載傾斜攝影場景展示

我這裡 cesium 加載傾斜攝影是用 3DTiles 形式，用 .b3dm 格式的資料：

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載下傳，對本專欄感興趣的話，可以關注一波

GIS之家作品店鋪：GIS之家作品店鋪

GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢