从沙盒开始学习Cesium（持续更新）

本文链接：https://blog.csdn.net/qq_36802917/article/details/109304097

1、设置Cesium3DTileStyle：通过3dTileset一些属性，编写条件使3dTileset变色

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Feature%20Styling.html

一些属性写法需要参考3D Tiles Styling language 文档

扩展知识：vector向量

向量类型

vecn 包含n个float分量的默认向量；

bvecn 包含n个bool分量的向量；

ivecn 包含n个int分量的向量；

uvecn 包含n个unsigned int分量的向量；

dvecn 包含n个double分量的向量；

2、加载3d模型数据（entity的方式加载glb、gltf）

沙盒：https://sandcastle.cesium.com/?src=3D%20Models.html&label=All

3、修改3d模型外观（颜色（模型颜色、模型透明度）、轮廓（轮廓大小、轮廓透明度、轮廓颜色）等）。entity的方式加载glb、gltf，通过改变entity的model里面的配置去修改外观。

沙盒：https://sandcastle.cesium.com/?src=3D%20Models%20Coloring.html&label=All

4、调整Cesium3DTileset的高度，通过矩阵Matrix调整

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Adjust%20Height.html&label=All

该例子需要了解向量、矩阵的概念。

参考文档 https://www.zhihu.com/question/21082351/answer/1023650088

推荐书籍：3D数学基础：图形与游戏开发（清华大学出版社）

个人理解，有误请指出：通过中心点垂直方向上的两个点，一个原点一个移动后的点，计算出一个平移向量Cartesian3 translation，通过这个向量去创建一个4X4矩阵，最后把计算出来的矩阵赋值给tileset的矩阵属性，从而达到改变tileset的位置。

5、通过鼠标位置，去获取到鼠标位置上的Cesium3DTileFeature，再改变feature的颜色，从而看到鼠标移动的地方有高亮效果。

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20BIM.html&label=All

这里需要理清 Cesium3DTile、 Cesium3DTileset、Cesium3DTileFeature的关系

6、设置Cesium3DTileFeature，通过获取Feature一些属性，编写条件使3dTileset变色，原理和1差不多，不过这个例子细化到模型里的属性，使模型某个部分变色。

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Batch%20Table%20Hierarchy.html&label=All

7、将3d模型进行压平

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Clipping%20Planes.html&label=All

8、个人觉得这个沙盒跟1很像，都是通过3D Tiles Styling language 这个语言去改变3dtiles中部分数据的外观

沙盒：http://172.16.125.17:6001/Apps/Sandcastle/index.html?src=3D%20Tiles%20Feature%20Styling.html&label=All

9、通过创建检测边缘的后处理阶段，将鼠标拾取到的featue赋值给边缘检测阶段，就能显示feature的边缘。

同时这个沙盒介绍了一种overlay的方式，显示标签。

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Feature%20Picking.html&label=All

10. 使用primitives的方式加载Cesium3DTileset。

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Formats.html&label=All

设置viewer.shadows = true; 可以看到阴影

11、通过设置viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin); 可以调试3dtilset（不同tile的颜色会不一样等）

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Inspector.html&label=All

12、通过鼠标事件，1、去获取点击位置，生成文字标签。2、控制获取到的feature显隐。3、获取feature的属性。

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Interactivity.html&label=All

13、设置相机的位置、视角

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Interior.html&label=All

14、控制tileset的显隐。叠加tileset

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Photogrammetry%20Classification.html&label=All

值得注意：

var classificationTileset = new Cesium.Cesium3DTileset({
url: classifcationTilesetUrl,
classificationType: Cesium.ClassificationType.BOTH,
});

classificationType可以设置是否影响地形，3D切片或同时影响这两者

设置地形，会发现被3dtileset覆盖

设置both或者CESIUM_3D_TILE

15、用primitive的方式加载tileset，并定位到tileset

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Photogrammetry.html&label=All

16、加载点云数据，在点云基础上加一层tileset，然后根据tileset的属性赋值颜色，看起来像是拾取到点云的某个部分，实际上是拾取tileset的。有点像单体化？

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Point%20Cloud%20Classification.html&label=All

17、加载点云数据，并对加载点云一些性能进行配置

具体配置需要翻文档，文档中有很多配置。

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Point%20Cloud%20Shading.html

18、根据点云的一些属性，修改点云颜色等。方法跟修改tileset的很类似，使用3D Tiles Styling language

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Point%20Cloud%20Styling.html&label=All

19、加载矢量面图层（tileset），鼠标移上去将获取到的feature改变颜色

沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Terrain%20Classification.html&label=All

20、环境光屏蔽

沙盒：https://sandcastle.cesium.com/?src=Ambient%20Occlusion.html&label=All

百度了一下环境光屏蔽的用途：

Ambient Occlusion简称AO，中文没有太确定的叫法，一般译作环境光遮蔽。百度百科上对AO的解释是这样的：AO是来描绘物体和物体相交或靠近的时候遮挡周围漫反射光线的效果，可以解决或改善漏光、飘和阴影不实等问题，解决或改善场景中缝隙、褶皱与墙角、角线以及细小物体等的表现不清晰问题，综合改善细节尤其是暗部阴影，增强空间的层次感、真实感，同时加强和改善画面明暗对比，增强画面的艺术性。AO简单来说就是根据周围物体对光线的遮挡程度，改变明暗效果。AO具体理论原理在网上都可以找到，感兴趣的可以去查阅。

21、加载ArcGisMapServer服务

沙盒：https://sandcastle.cesium.com/?src=ArcGIS%20MapServer.html&label=All

22、加载ArcGisMapServer服务的地形数据

沙盒：https://sandcastle.cesium.com/?src=ArcGIS%20Tiled%20Elevation%20Terrain.html&label=All

23、加载DEM地形数据

沙盒：https://sandcastle.cesium.com/?src=ArcticDEM.html&label=All

24、加载图片在地球指定位置（在项目中还挺常用的，使用billboard加载图片，还有各种配置什么不被地形遮挡、在多远处显示或者放大、透明度调整等等）

沙盒：https://sandcastle.cesium.com/?src=Billboards.html&label=All

25、bloom效果，调整画面亮度、对比度等。和环境光屏蔽的使用类似

沙盒：https://sandcastle.cesium.com/?src=Bloom.html&label=All

26、使用entity加载正方体。

沙盒：https://sandcastle.cesium.com/?src=Box.html&label=All

27、使用czml的方式去加载3dtileset

沙盒：https://sandcastle.cesium.com/?src=CZML%203D%20Tiles.html&label=All

28、使用czml的方式去加载billboard和label等

沙盒：https://sandcastle.cesium.com/?src=CZML%20Billboard%20and%20Label.html&label=All

29、使用czml的方式画圆和圆柱体

沙盒：https://sandcastle.cesium.com/?src=CZML%20Circles%20and%20Ellipses.html&label=All

30、使用czml的方式画矩形

沙盒：https://sandcastle.cesium.com/?src=CZML%20Colors.html&label=All

31、使用czml的方式画圆锥和圆柱

沙盒：https://sandcastle.cesium.com/?src=CZML%20Cones%20and%20Cylinders.html&label=All

32、使用czml的方式画管道

沙盒：https://sandcastle.cesium.com/?src=CZML%20Corridor.html&label=All

33、使用czml的方式绘制正方体，并且设置时钟，将正方体高度动态变化

沙盒：https://sandcastle.cesium.com/?src=CZML%20Custom%20Properties.html&label=All

34、使用czml的方式加载glb，并且通过时钟，去控制模型某个部分运动

沙盒：https://sandcastle.cesium.com/?src=CZML%20Model%20-%20Node%20Transformations.html&label=All

35、使用czml的方式加载glb，并且通过时钟，去播放模型中某个动画

沙盒：https://sandcastle.cesium.com/?src=CZML%20Model%20Articulations.html&label=All

36、使用czml的方式加载gltf

值得学习的是，里面的gltf数据的json文件代码给出来了，可以通过这个沙盒了解gltf的数据格式

沙盒：https://sandcastle.cesium.com/?src=CZML%20Model%20Data%20URL.html&label=All

37、使用czml的方式绘制一个路径path，配合时钟，使billboard沿着路径移动

沙盒：https://sandcastle.cesium.com/?src=CZML%20Path.html&label=All

38、使用czml的方式绘制一个点，配合时钟，使点随着时间变化而改变位置

沙盒：https://sandcastle.cesium.com/?src=CZML%20Point%20-%20Time%20Dynamic.html&label=All （画点并移动）

https://sandcastle.cesium.com/?src=CZML%20Point.html&label=All （单纯画一个点）

39、使用czml的方式画多边形并随始终变化而变化颜色位置和画一个带有洞的多边形

沙盒：https://sandcastle.cesium.com/?src=CZML%20Polygon%20-%20Interpolating%20References.html&label=All

40、使用czml的方式画多边形，并设置定时器，控制显隐

沙盒：https://sandcastle.cesium.com/?src=CZML%20Polygon%20-%20Intervals%2C%20Availability.html&label=All

41、使用czml的方式画管道

沙盒：https://sandcastle.cesium.com/?src=CZML%20Polyline%20Volume.html&label=All

42、使用czml的方式画线

沙盒：https://sandcastle.cesium.com/?src=CZML%20Polyline.html&label=All

43、使用czml的方式画球体、椭圆求

沙盒：https://sandcastle.cesium.com/?src=CZML%20Spheres%20and%20Ellipsoids.html&label=All

44、使用czml的方法画不规则的墙体

沙盒：https://sandcastle.cesium.com/?src=CZML%20Wall.html&label=All

45、使用czml的方式画不同形状的图形，并设置层级

沙盒：https://sandcastle.cesium.com/?src=CZML%20ZIndex.html&label=All

46、加载czml的文件

沙盒：https://sandcastle.cesium.com/?src=CZML.html&label=All

47、entity的属性，使用回调属性Cesium.CallbackProperty，属性值可以一直变化，不过比较消耗性能。

沙盒：https://sandcastle.cesium.com/?src=Callback%20Property.html&label=All

48、给键盘和鼠标左键绑定事件，去控制相机的位置

沙盒：https://sandcastle.cesium.com/?src=Camera%20Tutorial.html&label=All

49、控制相机移动的位置、角度，飞行时间等。

沙盒：https://sandcastle.cesium.com/?src=Camera.html&label=All

50、使用entity加载glb格式的模型，并且设置实体存在的有效时间。

沙盒：https://sandcastle.cesium.com/?src=Cardboard.html&label=All

值得注意的是，这里面的entity对象中的position使用了Cesium.SampledPositionProperty，使用这个可以设置某个时间点，entity所在的位置，所以该实例中的entity随时间变化位置也在变化。

51、裁切地球，只显示地球某一块面积。

沙盒：https://sandcastle.cesium.com/?src=Cartographic%20Limit%20Rectangle.html&label=All

这个例子中，比较好奇的是，为什么显示边缘的entity建立了10个一摸一样的，明明建一个就可以的事情，有同行可以留言解释下吗？

52、使用Cesium Inspector去显示当前渲染速度，包围盒等。
viewer.extend(Cesium.viewerCesiumInspectorMixin);

这个和3dtileset调试不太一样viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin); 可以调试3dtilset

沙盒：https://sandcastle.cesium.com/?src=Cesium%20Inspector.html&label=All

53、加载OSM建筑数据

沙盒：https://sandcastle.cesium.com/?src=Cesium%20OSM%20Buildings.html&label=All

54、通过CesiumWidget的方式加载地球

沙盒：https://sandcastle.cesium.com/?src=Cesium%20Widget.html&label=All

Widget这个案例展示了一个Cesium的简化窗体。在之前的案例中使用的都是Cesium.Viewer这个窗体组件，包含了非常丰富的组件内容。Cesium.CesiumWidget可以说是其简化版本，不包含动画、图层选择等等其他组件内容，仅仅显示一个三维数字地球。并且，默认情况下也不会包含Cesium地形的图层。CesiumWidget和Viewer最大的区别在于，Viewer提供了更全的小控件容器管理功能，所以有那么多小部件在上面。

55、加载地形terrainProvider

沙盒：https://sandcastle.cesium.com/?src=Cesium%20World%20Terrain.html&label=All

56、使用entity的方式加载圆、圆柱

沙盒：https://sandcastle.cesium.com/?src=Circles%20and%20Ellipses.html&label=All

57、使用entity加载点，并且位置属性使用callback函数，动态改变位置，改变位置的过程中，计算贴地的高度。scene.sampleHeight返回给定制位置处场景几何的高度，如果没有则返回 undefined。

沙盒：https://sandcastle.cesium.com/?src=Clamp%20to%203D%20Model.html&label=All