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的组成:

扫描二维码关注公众号,回复: 17366440 查看本文章

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.官网沙盒例子:官网

猜你喜欢

转载自blog.csdn.net/zhanglixin999/article/details/134395465