1. Three.js

Three.js 是一款基于 WebGL 的强大 JavaScript 库，用于在 Web 浏览器中创建和呈现三维图形。它提供了基础的 3D 渲染功能，包括几何体创建、材质和光照效果。让浏览器中的 3D 图形创建与显示变得前所未有的简单。

通过精心设计的 API，Three.js 成功地降低了 WebGL 的复杂性，使得即使是没有深厚技术背景的开发者也能轻松打造出令人惊艳的 3D 场景、模型、动画以及粒子系统。

主要功能：

• 3D 场景与模型：Three.js 支持导入多种格式的 3D 模型，包括 OBJ, STL, FBX 等，并可以创建自定义的 3D 几何体。

• 材质与材质材料：Three.js 支持多种材质类型，如基础材质、材质材料等，可以实现逼真的渲染效果。

• 灯光与阴影：Three.js 支持各种光源，如点光源、平行光源等，并且可以设置阴影，增强场景的真实感。

• 动画与物理引擎：Three.js 内置动画库，可以创建关键帧动画，同时也支持使用 Cannon.js 等物理引擎实现更真实的物理动画效果。

• 插件扩展：Three.js 有活跃的社区，有许多第三方插件可以扩展其功能，如 GLTFLoader 用于导入 GLTF 模型，OrbitControls 用于轨迹控制等。

• 支持 VR 与 AR：Three.js 支持 VR 和 AR 体验，可以通过相关插件实现在 VR 设备上的 3D 应用。

应用场景：

数字孪生、智慧城市、智慧园区、网页游戏、数据可视化、三维展示等。

相关教程资源

• 官网入门教程：https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene

• Three.js 中文网：http://webgl3d.cn/

• 探索 three.js：https://discoverthreejs.com/zh/

• Shadertoy：https://www.shadertoy.com/

• glsl.app：https://glsl.app/

2.Cesium

Cesium 是一款开源的基于 JavaScript 的 3D 地图框架，它利用了现代 Web 技术，如 HTML5、WebGL 和 WebAssembly，来提供跨平台和跨浏览器的三维地理空间数据可视化。

支持大规模地形渲染和实时数据流，支持丰富的 API 来控制和扩展地图功能，交互式 3D 地球和地图应用的创建

主要功能:

• 多视图支持：Cesium 支持以 2D、2.5D 和 3D 形式展示地图，无需为每种视图分别编写代码。

• 动态地理信息数据可视化：Cesium 能够使用时间轴动态展示具有时间属性的数据，支持使用符合 OGC 标准的 WMS、WMTS 等多种地图服务。

• 多种数据格式支持：Cesium 支持加载 KML、GeoJSON 等格式的数据绘制矢量图形，以及加载 3D Tiles 和 glTF 格式的三维模型，包括点云、倾斜摄影等大规模模型数据。

• 高性能和高精度：Cesium 对 WebGL 进行优化，充分利用硬件加速功能，并提供底层渲染方法进行可视化，包括绘制大型折线、多边形、广告牌、标签等 API，以及控制摄像头和创造飞行路径等坐标、向量、矩阵运算方法。

• 开源和免费：作为一个开源项目，Cesium 是免费使用的，拥有活跃的社区支持和持续的更新。

应用场景：

地理信息系统（GIS）、城市规划与设计、航空与卫星图像的可视化、数字孪生、智慧城市、智慧园区、数据可视化

相关教程资源

• Cesium 官网案例：https://sandcastle.cesium.com/?src=3D%20Tiles%20Feature%20Styling.html

• Cesium 中文 API：http://cesium.xin/cesium/cn/Documentation1.72/index.html

• Cesium 中文基础教程：https://github.com/hujiulin/CesiumJS-tutorial

• Cesium 120+ 实战效果：https://blog.csdn.net/weixin_45782925/article/details/123269490

3.Babylon.js

Babylon.js 是一个开源的 3D 引擎，专门为 Web 浏览器设计，允许开发者创建和展示交互式 3D 内容，无需安装任何插件。

它是基于 WebGL 技术构建的，这意味着它可以利用现代浏览器内置的图形硬件加速功能来渲染 3D 图形。

主要功能:

• WebGL 支持：支持 WebGL 1.0、2.0 和 WebGPU，使得 3D 内容可以在无需插件的情况下在现代浏览器中运行。

• 完整的场景图：包括灯光、摄像机、材质、网格、动画、音频和动作等元素。

• 跨平台原生应用部署：支持 iOS、Android、MacOS、Win32 和 UWP 等平台。

• 物理引擎集成：支持 oimo.js、ammo.js 和 cannon.js 等多种物理引擎。

• 粒子系统：支持 CPU 和 GPU 两种模式渲染的粒子系统，以及立体粒子系统。

• 基于 Web Audio 的音频引擎：提供高质量的音频支持。

• 硬件加速的 GUI：提供交互式图形控件，如按钮、多选框等。

• 着色器和渲染：支持节点材质、基于物理的渲染(PBR)、镜面反射、透明度贴图等多种着色器效果。

• VR 和 WebXR 支持：允许开发者创建沉浸式的虚拟现实体验。

应用场景：

游戏开发、教育、建筑可视化、产品展示、数据可视化、虚拟现实和增强现实(AR)。

相关教程资源

• Babylon.js 中文网：https://www.cnbabylon.com/

• 教程大全：https://doc.cnbabylon.com/

• 案例大全：https://example.cnbabylon.com/

4.Mapbox GL

Mapbox GL 是一个现代的地图平台，它提供了一整套工具和服务，用于构建交互式、可定制的地图和地理位置服务。

Mapbox GL 包括客户端库、服务器端组件和在线服务。

Mapbox GL 的主要优势在于其高性能、灵活性和可定制性。

它适用于各种应用场景，包括地理位置服务、数据分析可视化、互动地图应用开发、移动导航、自动驾驶等。通过 Mapbox GL，开发者可以快速构建功能丰富、视觉吸引人的地图应用。

主要功能:

• 矢量瓦片渲染：Mapbox GL 使用矢量瓦片（vector tiles）技术，这意味着地图数据是动态加载和渲染的，从而提供更快的响应速度和更小的数据量。

• WebGL 支持：它利用 WebGL 技术进行图形渲染，这使得地图可以在各种设备上平滑地缩放和平移，无需重新加载图像。

• 样式定制：Mapbox GL 允许用户定制地图的样式，包括颜色方案、符号图标等，以打造独特的品牌地图。

• 数据驱动的样式：Mapbox GL 支持数据驱动的样式定义，允许开发者根据数据属性动态改变地图元素的颜色、大小甚至形状。

• 开源：Mapbox GL 是一个开源项目，这意味着它拥有活跃的社区支持，并且可以免费使用。

• 集成 Mapbox 服务：Mapbox GL 可以与 Mapbox 提供的其他服务如 Mapbox Studio、Mapbox Tiling Service 或 Uploads API 集成，使用户能够访问和展示自己的地理数据。

应用场景：

地理信息服务和数据分析可视化、互动地图应用开发、移动导航和自动驾驶、虚拟现实和增强现实(AR)、产品展示和数据可视化、智慧城市、智慧园区。

相关教程资源

• 官方案例资源：https://docs.mapbox.com/mapbox-gl-js/example/

• 官方 Api：https://docs.mapbox.com/

5.Unreal Engine

Unreal Engine（简称 UE）是由 Epic Games 开发的一款功能强大的游戏引擎，它被广泛用于开发各种类型的游戏、模拟、可视化项目以及交互式体验

Unreal Engine 5（UE5）是最新版本的引擎，它引入了新的技术和功能，如 Lumen 全局光照系统、Nanite 虚拟化微多边形几何技术等，进一步提高了渲染质量和开发效率。

⭐️ 这里有同学肯定会有疑问，我为什么会推荐 UE , 因为在 UE 中我们可以使用 Cesium for Unreal 插件来将 Cesium 集成到 Unreal Engine 中，从而实现 Cesium 在 Unreal Engine 中的使用。

主要功能:

• Cesium ion 集成：Cesium for Unreal 插件提供了与 Cesium ion 的集成，Cesium ion 是一个基于云的平台，提供了对全球高分辨率 3D 内容的即时访问，包括摄影测量、地形、图像和建筑物。

• 地理参考组件：CesiumGeoreference 组件允许开发者将场景放置在全球环境中，以便与 Unreal Engine 中的本地环境更平滑地交互。

• 数据流和可视化：Cesium for Unreal 可以流式传输和可视化来自 Cesium ion 的数据，使用开放标准构建丰富的 3D 地理空间应用程序。

• 跨平台支持：与 Unreal Engine 一样，Cesium for Unreal 支持多种平台，包括 PC、游戏主机、移动设备和 VR/AR 设备。

• 开源和免费：作为一个开源项目，Cesium for Unreal 对所有用户免费，拥有活跃的社区支持。

应用场景：

游戏和模拟、可视化、交互式体验、虚拟现实和增强现实(AR)、产品展示和数据可视化、智慧城市、智慧园区。

相关教程资源

• UE5+Cesium智慧城市&园区视频教程：https://space.bilibili.com/226886942/channel/seriesdetail?sid=3476470

来源：前端开发爱好者