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之家小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

版权声明:本文为giserhome原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/giserhome/p/9286309.html