cesium 之三维场景展示篇内容概览本篇实现 cesium 三维场景展示，效果图如下：三维模型.gltf场景展示

内容概览

1.基于cesium 实现三维场景展示效果
2.源代码 demo 下载

本篇实现 cesium 三维场景展示，效果图如下：
三维模型.gltf场景展示

倾斜摄影场景展示

加载三维模型 gltf

cesium 三维模型格式数据转换
cesium 支持加载三维模型的格式是 .gltf 或者 .glb，一般我们制作三维模型都是从 3dmax 软件，所以需要转换;官网开源有转换工具 obj2gltf，具体的见这里：github.com/AnalyticalG… 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 格式的数据：

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

倾斜摄影配置文件：

/*三维倾斜摄影配置信息*/
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);
        });
    },

cesium 之三维场景展示篇

内容概览

link==>