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
相关外观配置:https://cesium.com/docs/cesiumjs-ref-doc/ModelGraphics.html#.ConstructorOptions
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中部分数据的外观
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
58、使用czml的方式加载模型,并且让模型贴着3dtiles行驶,方法给上一个例子很类似,都是计算了高度再赋值位置属性。
沙盒:https://sandcastle.cesium.com/?src=Clamp%20to%203D%20Tiles.html&label=All
59、设置entity贴着地形
沙盒:https://sandcastle.cesium.com/?src=Clamp%20to%20Terrain.html&label=All
另外还发现了一个设置被地形遮挡后的entity颜色
60、设置entity是否覆盖在3dtileset上,通过设置classificationType: Cesium.ClassificationType.BOTH (之前也有例子有讲到过)
沙盒:https://sandcastle.cesium.com/?src=Classification%20Types.html&label=All
61、设置时钟部分属性
沙盒:https://sandcastle.cesium.com/?src=Clock.html&label=All
例子中可以看出地球在随时间变化,明暗也在变化
62、多个billboard的时候,进行聚合,防止过多billboard的重叠
沙盒:https://sandcastle.cesium.com/?src=Clustering.html&label=All
63、使用entity画管道
沙盒:https://sandcastle.cesium.com/?src=Corridor.html&label=All
64、postProcessStages后处理效果应用于最终渲染
使用new Cesium.PostProcessStage,在场景渲染的纹理
沙盒:https://sandcastle.cesium.com/?src=Custom%20Per-Feature%20Post%20Process.html&label=All
65、这个例子和64差不多,不过这个后处理效果是整个场景都加上着色器的效果,没有鼠标拾取的交互
沙盒:https://sandcastle.cesium.com/?src=Custom%20Post%20Process.html&label=All
66、使用entity的方式渲染圆柱、圆锥
沙盒:https://sandcastle.cesium.com/?src=Cylinders%20and%20Cones.html&label=All
67、使用czmldatasource来加载czml,通过设置iewer.dataSources.raise(ds1)、viewer.dataSources.lower(ds1); 去控制多个czmldatasource的层级
我觉得用datasource来对不同分类的数据进行存储还是不错的,可以做到统一管理
沙盒:https://sandcastle.cesium.com/?src=DataSource%20Ordering.html&label=All
68、通过PostProcessStageLibrary去创建常见的后期处理阶段的函数,从而调整整个场景的明亮度、对比度、曝光等。
沙盒:https://sandcastle.cesium.com/?src=Depth%20of%20Field.html&label=All
69、设置entity能看到的距离范围,主要通过 设置distanceDisplayCondition: new Cesium.DistanceDisplayCondition(num, num)控制
沙盒:https://sandcastle.cesium.com/?src=Distance%20Display%20Conditions.html&label=All
70、配合左击右击,鼠标事件,实现一个画线和画面的功能。
沙盒:https://sandcastle.cesium.com/?src=Drawing%20on%20Terrain.html&label=All
个人理解是将左击时的点坐标保存起来,等到右击完成绘制的时候,就用entity把图形绘制出来。比较有趣的是例子里面鼠标移动时绘制线面也在变化的实现。
71、加载一个星空的3dtileset图层,当有太阳的时候,图层消失
沙盒:https://sandcastle.cesium.com/?src=Earth%20at%20Night.html&label=All
72、创建一种材质,该材质组合了多个颜色/渐变带层,并将它们映射到地形高度。着色器对所有高度进行二元搜索,以找出给定高度上下的颜色,并在它们之间进行插值以获得最终颜色。
沙盒:https://sandcastle.cesium.com/?src=Elevation%20Band%20Material.html&label=All
73、加载kml数据
沙盒:https://sandcastle.cesium.com/?src=Export%20KML.html&label=All
74、开启抗锯齿效果
抗锯齿可以使模型显示更加逼真
沙盒:https://sandcastle.cesium.com/?src=FXAA.html&label=All
75、雾的效果,通过postProcessStages创建一个后处理阶段,通过加入自定义着色器,去实现3dtileset被雾遮蔽的效果。
沙盒:https://sandcastle.cesium.com/?src=Fog%20Post%20Process.html&label=All
76、加载topojson格式的数据,数据加载完之后,可以获得数据里的entity,加载topojson数据的时候,可以设置边框色、填充色等。不设置的话可以另外设置entity的颜色达到同一效果。
沙盒:https://sandcastle.cesium.com/?src=GeoJSON%20and%20TopoJSON.html&label=All
77、加载geojson格式的数据
沙盒:https://sandcastle.cesium.com/?src=GeoJSON%20simplestyle.html&label=All
78、设置相对于地形的位置
沙盒:https://sandcastle.cesium.com/?src=Geometry%20Height%20Reference.html&label=All
Cesium.HeightReference.CLAMP_TO_GROUND//表示这个位置被固定在地形上
Cesium.HeightReference.NONE//表示这个位置是绝对的
Cesium.HeightReference.RELATIVE_TO_GROUND//表示这个位置高度是指地面以上的高度
三种效果对比: