01.Cesium和Three.js的初步认识

一、Threejs和Cesium的对比

相同点：

都是基于WebGL技术开发的Javascript库，用于在浏览器中创建和显示动画3D计算机图形。

不同点：

Threejs：受众面比较广，是封装了webgl的一些底层用法，让初学者更容易上手。例如绘制一个立方体，使用webgl原生api可能要写50行代码，包括构建坐标点，顶点组织、着色器等信息；在threejs里面可能只要一句代码就可以构建。实际上也是调用webgl原生api，只是做了更大粒度的封装。

Cesium：受众面相对较小，是Gis相关的，也是基于WebGL开发的。它主要是三维地球相关的js库，可以展示二维地图服务(百度地图、高德地图)、倾斜摄影模型。还可以在上面做一些三维分析。

二、Threejs概述

Threejs简介：

Three.js是一个基于WebGL的JavaScript 3D库。它封装了WebGL API，为开发者提供了简单易用的API，以便在Web浏览器中展示3D图形；

Three.js提供了组件、方法和工具，用于创建和处理3D图形，使得开发者可以在Web浏览器中快速创建3D图形和动画，而不需要深入了解WebGL的底层实现。

Threejs的组成：

Three.js支持多种类型的3D对象：几何体、材质、灯光、相机、渲染器 等

几何体：包含球体、立方体、圆锥体和圆柱体等。这些几何体可以进行旋转、平移和缩放等变换操作。

材质：包含基础材质等，主要有颜色、切图、透明度等属性。它们可以与几何体组合，形成具有不同表面效果的3D对象。

灯光：包含环境光、半球光和点光源等。它们可以为场景中的对象添加实际的阴影和光照。

三、 Cesium概述

Cesium简介

Cesium是AGI公司计算机图形开发小组，于2011年研发的三维地球和地图可视化开源JavaScript库。Cesium为三维GIS提供了一个高效的数据可视化平台。Cesium是基于Apache2.0许可的开源程序。

即：

1.Cesium是一个跨平台、跨浏览器的展示三维地球和地图的JavaScript库。

2.Cesium使用WebGL来进行硬件加速图形，使用时不需要任何插件支持。

3.Cesium需要有 WEB前端、图形学、GIS 三个学科的知识体系。

Cesium的作用

Cesium用于地理数据可视化，支持海量数据的高效渲染，支持时间序列动态数据的三维可视化。

具备太阳、大气、云雾等地理环境要素的动态模拟和地形等要素的加载绘制。

包含丰富的可用工具，即Cesium基本控件所提供的工具，如地理编码器，图层选择器等。

Cesium的功能

1、使用3d tiles格式流式加载各种不同的3d数据，包含倾斜摄影模型、三维建筑物、CAD和BIM的外部和内部，点云数据。并支持样式配置和用户交互操作。
2、全球高精度地形数据可视化，支持地形夸张效果、以及可编程实现的等高线和坡度分析效果。
3、支持多种资源的图像图层，包括WMS，TMS，WMTS以及时序图像。图像支持透明度叠加、亮度、对比度、GAMMA、色调、饱和度都可以动态调整。支持图像的卷帘对比。
4、支持标准的矢量格式KML、GeoJSON、TopoJSON、以及矢量的贴地效果。
5、三维模型支持gltf2.0标准的PRB材质、动画、蒙皮和变形效果。贴地以及高亮效果。

6、使用CZML支持动态时序数据的展示。
7、支持各种几何体：点、线、面、标注、公告牌、立方体、球体、椭圆体、圆柱体、走廊、管径、墙体。
8、可视化效果包括：基于太阳位置的阴影、自身阴影、柔和阴影。
9、支持大气、雾、太阳、阳光、月亮、星星、水面。
10、粒子特效：烟、火、火花。

11、地形、模型、3d tiles模型的面裁剪。
12、对象点选和地形点选。
13、支持鼠标和触摸操作的缩放、渲染、惯性平移、飞行、任意视角、地形碰撞检测。
14、支持3d地球、2d地图、2.5d哥伦布模式。3d视图可以使用透视和正视两种投影方式。
15、支持点、标注、公告牌的聚集效果。

Cesium的学习参考

Cesium做为三维GIS开发最火爆的前端框架，在三维数据管理、三维地形分析、动态场景可视化等方面广泛应用。

Cesium学习可用参考的文档有：
1.官网API文档：官网
2.官网沙盒例子：官网

原文链接1：cesium简介_右弦GISer的博客-CSDN博客

原文链接2：Three.js基础介绍_m0_68949064的博客-CSDN博客