Censium加载3dtiles

标签： Cesium 分类： Gis 创建时间：2019-11-12 10:08:01 更新时间：2024-11-23 02:04:25

前言

这篇文章已经写了很久了，很多的逻辑都不是很通顺，也是从一个小白找到了整个的思路。可以直接看看整个的3d建模、数据处理、模型生成和模型加载以及优化的过程。我就直接说步骤好了，我这里使用最简单的方式。就是从模型生成，到数据转换，然后使用Cesium进行加载整个的过程。

这篇文章，作为一篇探讨性的文章，目的不在于(当然，实际的目的在于解决问题)实现什么成功的案例，我想具体的编码和实际的案例，应该是在探索结束之后，进行总结的时候，进行统一的编写。那么先说一下需求，就是如何将cad管线生成三维模型，并加载到浏览器中。这其中有些技术点。

- cad图没有坐标系
- 如何对管线进行三维符号化，需要什么样的软件
- 能不能通过开源的Censium加载符合化后的三维管线

解决cad图没有坐标的问题，这个可以在arcmap进行地理校准操作解决。那么如何对经过校准的管线数据，或者shp文件中的三维管线进行三维符号化呢？

(1) 在我以往的工作经历中，接触过其他公司，通过将shp文件导入到skyline中，然后生成3dml,同时生成fly文件，使用skyline自带的二次开发接口将管线加载到了IE浏览器中，Skyline的javascript二次开发接口支持IE浏览器。其中会用到他们公司专门开发的shp进行三维化的建模工具，但据我了解，在最后生成3dml格式的时候，是通过shp文件，直接通过Skyline的Make 3dml菜单生成的，那我就有理由猜测，这个专用的建模工具，仅仅只是对shp进行了标准化转换，而没有实际的生成三维模型。

参考文章:
1.gltf和3dtiles的关系
2.Mars3D(含Cesium)数据及服务篇：城市建筑物转为3DTiles白膜格式
3.分享开源3dtiles生成工具 Osgb(OpenSceneGraph Binary) 转 3D-Tiles、Esri Shapefile 转 3D-Tiles、Fbx 转 3D-Tiles
4.用网格生成3D Tiles 3D Tiles Processing Engine 是一个引擎，它允许你将网格的多级数据集平铺到针对流式优化的 3D Tiles 瓦片集中。
5.3DTiles格式介绍——目录 1.概要；2.文件规范;3.Tile;4.TileSet。
6.3dTiles 数据规范详解[1] 介绍

(2) 第二个可以参考的就是ArcGIS，ArcGIS Pro对三维管线有一个整体的解决方案，根据参考资料，可以使用ArcGIS Pro对二维的图形文件生成三维图形，然后发布到Portal中进行查看。首先ArcGIS Pro是收费的，买一套就要好几十万，这个成本对一个小公司来说，真的是承担不起啊。万不得已，才会考虑这个平台吧。

参考文章：
1.ArcGS Pro中管线三维符号化方法
2.ArcGIS三维入门手册
3.ArcGIS Pro发布三维服务操作流程

(3) 第三个就是开源的Censium平台了。通过阅读和测试，我初步形成的思路是：通过第三方软件，将cad图进行三维化，然后导出censium支持的数据格式，然后进行加载，这里面最大的问题，其实是如果直接通过3dmax将cad中的线生成了3d模型，但是他的坐标信息同时也就失去了，这个时候在加载到censium中，该如何进行精确的定位呢？

参考文章：
1.Cesium原理篇：glTF
2.cesium模型加载-转换为gltf 加载fbx格式模型 (这篇文章主要是讲了使用多个工具，从fbx格式→dae格式→gltf格式→cesium加载gltf格式模型的过程)

(4) 倾斜三维摄影测量
这就触及到我的知识盲区了。

参考文章：
1.倾斜摄影三维建模软件汇总
2.Smart3D软件基本操作步骤
3.Cesium加载三维倾斜摄影数据
4.osgb转Cesium 3D tiles工具

(5) 今天刚了解到了skyline可以发布sfs服务，提供Censium加载；还有可以使用CensiumLab软件进行三维的处理，等待时间进行深入的学习。

参考文章：
1.基于skyline的城市三维建模研究
2.skyline TerraBuilder 制作MPT方法与技巧（1）
3.三维地下管线系统（skyline）
4.Skyline学习系列 01 如何通过SFS发布shape文件

(6) arcgis关于三维可视化的相关技术
arcgis关于三维可视化，其实做的已经非常好了，但是要收费啊，这就比较尴尬了，查了一下价格，好像都不是明码标价的，看公司和esri关系吧，可能每个地方的报价不太一样，以前单位买的正版，花了多少钱，其实我也不太清除。

参考文章：
1.ArcGIS API for JavaScript 4.x中的3D部分（3）
2.ArcGIS API for JavaScript三维管网之三维模型制作（无插件）

(7) 经过多日的探索与学习，我发现了一个神器CesiumLab,这个工具可以将3d max中的模型转换成Cesium支持的3d tiles模型，同时，也支持将3d max中的世界坐标系转换为地理坐标系，这样转换后的模型就可以轻松的加载到Cesium模型上了。关于这方面的学习，会另外写文章论述，敬请期待。文章写到这，其实已经超出了Cesium的范围了，可以说是网页中显示三维模型，所需要的知识与技术探索，比如使用three.js进行三维模型的加载等。

(2019年12月7日)
BIM模型相关的软件、公司与技术术语：bimface、轻量化、减面。

参考文章：
1.Three.js加载.obj模型文件
2.Cesium 学习番外——早期选择研究
3.[ol-cesium]二三维联动 | 基于2019肺炎疫情的数据可视化
4.WebGL管网展示(及TubeGeometry优化) 建立管路的方式主要两种：1.通过3DMax C4D Blender等建模工具进行建模。2.通过路径数据，程序生成三维管路。这里讲了如何使用TubeGeometry根据路径生成管道的方法。

1.打开3dmax新建模型

先随便点，找个现成的模型画上。

2.导出模型

将模型导出为.obj格式。

3.打开CesiumLab

打开CesiumLab软件，然后选择数据处理-> 人工模型切片，添加刚刚导出的obj格式的模型。

4.设置模型位置

选中要转换的模型，然后选择位置。

5.输入局部经纬度

这里我选择输入局部经纬度，为什么不选择EPSG定义一个4326(我的Cesium加载的是天地图)，我尝试了，转换后的模型，加载到天地图，就不见了。暂时没有想明白这里面的原因，先用局部经纬度吧。

6.输出3d tiles

设置完成后，选择输出目录，输出3d tiles

7.Cesium加载3d tiles

代码其实挺简单的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 加载3d模型
var url="./resource/cesium/ch3/tileset.json"
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: url,  //数据路径  
    maximumScreenSpaceError: 2,        //最大的屏幕空间误差
    maximumNumberOfLoadedTiles: 1000,  //最大加载瓦片个数
}));

// 跳转到模型上
tileset.readyPromise
    .then(function (tileset) {
        // tileset的边界球
        let boundingSphere = tileset.boundingSphere;
        // 跳到边界球范围
        viewer.camera.flyToBoundingSphere(boundingSphere);
        // 绑定相机所在的位置：必须设置，否则左键移动变成单点定位
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

        // 或者使用这种方式
        // viewer.zoomTo(
        //     tileset,
        //     new Cesium.HeadingPitchRange(
        //         0.5,
        //         -0.2,
        //         tileset.boundingSphere.radius * 4.0
        //     )
        // );
    })
    .catch(function (error:any) {
      console.log(error);
    });

效果图：

参考文章：
1.Cesium 发布3dtiles模型（iis、tomcat）
2.Cesium编程入门（六）添加3D Tiles并调整位置贴地
3.《Cesium 基础知识点》- 3dtiles 模型跳转(两种方式) 1.有动画效果;2.直接跳转;

注意
这里有一点要注意的是，就是使用IIS当服务器的时候，要设置服务器的mime类型为以下的数据类型，否则IIS会拦截掉.b3dm,.cmpt等数据。

1
2
3
4
5
6
.b3dm  application/octet-stream
.cmpt  application/octet-stream
.gltf  model/gltf+json
.bgltf  application/model/gltf-binary
.i3dm application/octet-stream
.glb model/gltf-binary
参考文章：
1.常用MIME类型 (这里很多的MIME类型，都是有关3d格式的类型)
2.Cesium加载3Dtiles模型并自定义位置 (这里有相关的代码，加载了地球、模型，并控制模型的位置)

8.加载优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
new Cesium.Cesium3DTileset({
    url:tilesUrl + '/3dtiles/chuangzhuang/tileset.json',
    modelMatrix: Cesium.Matrix4.fromArray([1,5.551115123125783e-16,5.898416033378595e-9,0,-6.106226635438361e-16,1,-1.1355608731111744e-8,0,-5.898416061134171e-9,1.1355608731111744e-8,0.9999999999999999,0,9.912469893228263,-19.08345020748675,-14.613607150502503,1]),
    skipLevelOfDetail: true,
    baseScreenSpaceError: 1024,
    maximumScreenSpaceError: 256, // 数值加大，能让最终成像变模糊
    skipScreenSpaceErrorFactor: 16,
    skipLevels: 1,
    immediatelyLoadDesiredLevelOfDetail: false,
    loadSiblings: true, // 如果为true则不会在已加载完概况房屋后，自动从中心开始超清化房屋
    cullWithChildrenBounds: true,
    cullRequestsWhileMoving: true,
    cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除
    preloadWhenHidden: true,
    preferLeaves: true,
    maximumMemoryUsage: 128, // 内存分配变小有利于倾斜摄影数据回收，提升性能体验
    progressiveResolutionHeightFraction: 0.5, // 数值偏于0能够让初始加载变得模糊
    dynamicScreenSpaceErrorDensity: 0.1, // 数值加大，能让周边加载变快
    dynamicScreenSpaceErrorFactor: 1, 
    dynamicScreenSpaceError: true // 有了这个后，会在真正的全屏加载完之后才清晰化房屋
});
参考文章:
1.Cesium加载海量地下三维管线 主要优化思路是:将管线和管点合并到一个Command，管点模型使用repeat合并为一个Command，多个管点使用I3DM，如果瓦片还有I3DM则用cpmt合并减少瓦片网络请求
2.cesium-Web页面优化总结 1.让浏览器使用独显来渲染webGL数据。2.把cesium对象从vue中提取出来。3.修改一下Cesium3DTileset的配置，来优化加载，提升流畅度。
3.Cesium加载海量倾斜模型优化配置
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 前言
  2. 2. 1.打开3dmax新建模型
  3. 3. 2.导出模型
  4. 4. 3.打开CesiumLab
  5. 5. 4.设置模型位置
  6. 6. 5.输入局部经纬度
  7. 7. 6.输出3d tiles
  8. 8. 7.Cesium加载3d tiles
  9. 9. 8.加载优化
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文