cesium之三维场景展示篇

本篇实现cesium三维场景展示,效果图如下:

倾斜摄影场景展示

1.加载三维模型gltf:

(1)cesium三维模型格式数据转换:

cesium支持加载三维模型的格式是.gltf或者.glb,一般我们制作三维模型都是从3dmax软件,所以需要转换;官网开源有转换工具obj2gltf,具体的见这里:github.com/AnalyticalGr,转换需要安装node环境,我这里加载三维模型就是从obj转换gltf来的;

(2)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,
                    }
                });              
            }
        }
    },

2.加载倾斜摄影场景展示:

我这里cesium加载倾斜摄影是用3DTiles形式,用.b3dm格式的数据:

倾斜摄影配置文件:

/*三维倾斜摄影配置信息*/
MapConfig.Tiles3D = {
    url: "http://localhost:8180/cesium/3DModel/test/3Dtiles/pazhou/Production_3.json"
};

初始化加载:

  //倾斜摄影3DTiles
        $("#cesium3DTiles").click(function(){
            cesium.add3DTiles(MapConfig.Tiles3D);
        });
    /**
     * 测试加载指定的3DTitles模型
     * @method add3DTiles
     * @param
     * @return
     */
    add3DTiles: function (obj) {
        var T = this;
        var tileset = this.cesiumViewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            url:obj.url,
            maximumScreenSpaceError: 2,//默认16,最大屏幕空间错误
            //maximumNumberOfLoadedTiles: 1000,
            maximumMemoryUsage:512//默认512,内存MB的最大数量
        }));
        tileset.readyPromise.then(function(tileset) {
            T.cesiumViewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 0));
            T.cesiumViewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        });
    },

 

作者: GIS之家

GIS之家微信号:gishome;GIS之家拥有自己的GIS开发团队,均是高校GIS研究生,具备丰富的webgis开发项目工作经验,专注以及热爱研究webgis技术的团队

《cesium之三维场景展示篇》有2个想法

  1. 1.无人机拍摄的倾斜摄影数据,可以制作导出3dtile格式的,smart3d、ContextCapture是可以的,不过商业版本,破解版本比较少;
    2.https://www.cesiumlab.com/
    一款制作cesium数据格式数据的软件,可以把obj转换3dtile,还有其他格式数据源

发表评论

电子邮件地址不会被公开。 必填项已用*标注