欢迎关注微信公号【三维网格3D】，第一时间获取最新文章

CesiumJS是一个开源、免费的三维地图开发框架，Three.js是一个也开源、免费的3D渲染框架，两者都是基于WebGL技术、使用JavaScript开发的Web前端三维可视化框架，在国内外应用非常广泛。本篇我们来聊聊Cesium+Three.js的几种方案，结合实际应用效果来分析各个方案的优点和缺点，以便项目中快速做出技术路线和方案选择。

1、Cesium和Three.js简单对比

Cesium可视化内容以地理空间数据为主，如卫星影像、地形、城市级三维模型等，数据量和空间范围都非常大，而对精度要求更高，所以其核心优势是高性能、高精度、规范标准，规范标准体现在遵循行业标准和主导制定3D Tiles标准上。

cesium官网

Three.js的目标则是构建一个易于使用、轻量级、跨浏览器的通用3D渲染框架，核心数据是3D对象和三维模型，视觉呈现、场景组织、3D对象管理、动画、可扩展性等方面有独特的优势，且可以于物理引擎很好的结合使用，在大屏三维展示、游戏、仿真等方面很有应用价值。

three.js官网

相比之下，Cesium更像是一个高级餐厅，下单即可坐享其成；而Three.js更像是一个厨房，厨具、食材甚至菜谱都备齐，就等你来发挥厨艺。

2、探索融合之路

写到这里，不禁要回望一下自己这几年执着地探索两个引擎融合的历程。

2.1、将Three.js场景当作模型加载

早在2017年初，接触Cesium近两年，又写了一段时间Three.js，对Cesium只支持gltf格式模型这一点不满，看到Three.js社区有很多模型格式的插件，便萌生了Cesium和Three.js结合的想法。

折腾大概两周，实现了第一个方案，先使用GLTFExporter将Three.js场景导出为gltf格式，然后通过加载gltf模型的方式，总算是把Three.js解析的模型加载到Cesium场景中了。

很快就发现这种做法的致命缺点：加载极慢，且不支持动画！

2.2、实现基于Cesium的Three.js渲染器

没过多久，开始读Three.js渲染器的源码，再加上对Cesium底层的一知半解，心里似乎很有底气了，开始了新的探索，参照Three.js的WebGLRenderer、CanvasRenderer、SVGRenderer，动手写一个CesiumRenderer，还将源码传到了GitHub，还起了一个很牛的名字Cesium3js（ https://github.com/MikesWei/Cesium3js ），这也是我上传的第一个开源项目。

想法很大，名头也很大，也实现了当时预期的效果，前面一个方案的缺点一定程度上已经弥补了，但是和真正渲染器差点不是一星半点，绝大部分的特性，都没有支持。

几个月后，Cesium官方博客上那篇介绍Cesium与Three.js集成方法的文章( 《IntegratingCesiumwithThree.js》https://cesium.com/blog/2017/10/23/integrating-cesium-with-threejs/ ) 发表了。

2.3、在Cesium实现Three.js部分接口

2017年底，换了新工作，有个项目需要将天气雷达三维数据展示在三维地球中，最好是实现体积渲染。寻寻觅觅，最终还是在Three.js社区找到了资源。有了项目需求驱动，我更清楚自己做Cesium和Three.js结合的目的，于是将Cesium3js代码重新整理，放弃了在Cesium上使用Three.js所有功能的想法，甚至直接不用依赖Three.js，而是在Cesium中实现类似Three.js的Mesh和Material的一套接口和渲染机制，支持部分Three.js对象。半年后将其开源，这便是我的第三个开源项目CesiumMeshVisualizer（ https://github.com/MikesWei/CesiumMeshVisualizer ）。承蒙同行不吝点赞，目前收获了454个Star,156次Fork。

2.4、将融合进行到底

2020年夏，GIS平台和游戏引擎融呈现不可挡的趋势，超图、Cesium等都相继推出虚幻引擎（Unreal Engine）插件。我们接到的需求，除了“静止”的海量数据调度外，场景中“运动”的物体也呈数量级增长，数据更新频率更高，更新的部件粒度也更细，用户三维场景的视觉效果要求更高，Cesium在这方面的能力明显不足。我们看到Three.js在解决这类需求具有极大的潜力，并在2020年底实现了Cesium与Three.js深度融合方案，真正实现了基于Cesium的Three.js渲染器，让Cesium、Three.js两个场景浑然一体！

3、方案效果对比及分析

从我们的探索历程可以看出，融合的方案很多，可以分为两类：

两个场景叠加，使用两个相互隔离的绘图上下文（context），WebGL层也没有任何交集，这类我们称之为“两个画布”方案；

两个场景共用一个绘图上下文（context），WebGL层有交集，这类我们称之为“一个画布”方案。

两类方案中又有很多具体的实现方案，下面基于我们现有的技术，通过实际代码，看看几个方案的效果。

3.1、小窗叠加显示three.js场景

此方案以Cesium创建的三维地图为主，展示宏观的地理空间场景，点击到地图上某个要素时，弹出小窗使用three.js展示诸如室内、设备详细结构、零部件等。两个场景只在业务逻辑上有关联，完全可以独立开发，最后进行集成，属于“两个画布”类。

下面通过一个简单的示例演示这个方案的主要流程。

HTML代码很简单，创建两个场景的容器，然后引入Cesium的js和css文件，Three.js通过import导入。

JavaScript代码主要做几件事：

创建两个场景显示器

Cesium场景添加一个球体；

Three.js场景添加一个圆环节；

点击Cesium场景的球体，弹窗显示Three.js场景。

效果视频：

1.小窗叠加three.js场景 _腾讯视频

3.2、在Three.js中使用Cesium

如果只是需要使用Cesium的部分GIS功能，比如坐标，几何体，太阳位置及照射方向等，那么可以只创建Three.js场景，场景中的几何体的顶点位置坐标、3D对象位置等由Cesium计算，使得Three.js的场景具备了地理空间表达的能力。

下面演示用Three.js展示一个地球，并加载海陆模板geojson，几何体由Cesium创建。

JavaScript代码关键点：

使用Cesium创建基于WGS84坐标的几何体；

将Cesium几何体转为Three.js几何体；

创建材质和3D网格；

3D网格绕x轴旋转90度，完成从y-up到z-up变换。

效果视频：

2.在three.js中使用cesium _腾讯视频

这个方案以Three.js为主，属于“一个画布”类，相当于基于Three.js构建一个简单的三维地图应用了，Cesium在这个方案中没有那么重要，完全可以用其他计算库替代，进而完全从头构建一个基于Three.js的三维地图框架，iTowns（ https://github.com/iTowns/itowns ）就是这么做的。

3.3、将Three.js场景当作模型加载

用Three.js组织场景，完成3D对象创建，gltf之外的其他格式模型解析，然后整体导出为gltf，最后使用Cesium.Model展示模型，属于“一个画布”类。

HTML代码也只是引用js、css文件，场景容器直接用body。

JavaScript代码也很简单，为了和其他方案对比，我们禁用碰撞检测，允许Cesium相机穿透物体和进入地下，开启地形深度测试，看看地形是不是正常的遮挡Three.js导出的gltf模型。

3.将three.js场景当作模型加载 _腾讯视频

其实毫无疑问，导出的gltf和普通的模型一样，遮挡关系必然时正常的，但是这个方案的限制很多，Three.js在这里相当于模型格式转换工具。

3.4、Three.js和Cesium相机同步

这是Cesium官方博客文章介绍的方案，属于“两个画布”类，Cesium创建的地球作为底图，以地图上一个点原点建立局部坐标系，Three.js场景基于此坐标系叠加到Cesium场景中，在Cesium帧渲染前同步两个场景的相机，之后Three.js场景搭建就和一般的Three.js应用搭建一样了。

HTML创建两个场景的容器，引入Cesium的js、css文件。

JavaScript代码关键点：

创建模型变换矩阵，设置整个Three.js场景在地球上的位置、旋转、缩放等参数；

使用模型变换矩阵构建局部坐标系；

监听Cesium场景preRender事件，将Cesium相机转为Three.js相机，并渲染Three.js场景。

效果视频：

4.three.js和cesium相机同步 _腾讯视频

这个方案和第一个方案很像，唯一不同在于是否相机同步。

最大优点是可以完全使用所有Three.js的特性，而且看上去很有融合的效果，也因为没有更好的其他方案，所以目前在网上流传甚广。

缺点主要是两个场景绘图上下文（context）完全分离的，遮挡关系、光照、阴影、后期特效、交互等等都是两套东西，并没有真正的融合。

3.5、Cesium和Three.js深度融合

Cesium和Three.js都是经过10年打磨的引擎，渲染器这层已经相对稳定了，所以这个方案便是从渲染器层着手，其基本原理是，用Cesium的DrawCommand来接替Three.js渲染器的部分工作；具体做法就是实现一个基于Cesium.DrawCommand的Three.js渲染器，让Three.js真正融入Cesium的渲染流程和上下文，和Cesium的其他对象一起进入GPU完成绘制。

我们先看一个简单的例子。

JavaScript主要做几件事：

创建Cesium场景，开启阴影和地形深度测试，禁用碰撞检测；

使用Cesium.Entity创建两个实体，颜色为天蓝色，开启阴影；

搭建Three.js场景，创建一个圆环节，颜色为灰色，开启阴影；

创建基于Cesium的Three.js显示器，加入Cesium场景的primitives；

设置Three.js显示器，使用Cesium太阳光作为Three.js场景光源。

效果视频：

5.cesium和three.js深度融合 _腾讯视频

可以看出：

遮挡关系正确：无论是两个Entity还是地形都可以把Three.js创建的圆环节遮挡；

光照同步正常：两个场景的物体都可以同步接收太阳光；

阴影关系正确：Entity的阴影可以投射到圆环节上，圆环节的阴影也可以投射到Entity上。

这就是这个方案的独特优势，实现了真正的深度融合。

这里的深度不仅指两个场景“深度缓冲区”统一这一层含义，更有渲染通道、光照、阴影、透明、半透明混合（Cesium的translucent不只是等同于Three.js的transparent）、贴地、后期特效等等的统一。

“深度缓冲区”统一，可以通过修改Three.js渲染器，让Cesium和Three.js共享context，达到共享深度缓冲区的目的，一定程度上解决了遮挡关系的问题。

而渲染通道、光照、阴影、透明、半透明混合（Cesium的translucent不只是等同于Three.js的transparent）、贴地、后期特效等等的统一，仅通过共享context是远远达不到的。

这个方案的缺点是不能直接使用Three.js的后期特效代码，后期特效统一使用Cesium的后期处理机制，也是为了确保两个场景在后期特效上的统一，部分常用的Three.js社区特有的后期特效，如OutlinePass(3D描边)、UnrealBloomPass(泛光特效)、SMAAPass(另一种抗锯齿算法)等，我们已经实现了Cesium版本，且在不使用Cesium+Three.js的情况下也可以单独使用，一定程度上弥补了方案的一大缺点。

从Three.js迁移到Cesium的后期特效，前几期文章就已经介绍过了，感兴趣的可以回顾一下。

3.6、更多深度融合示例

Cesium和Three.js深度融合方案经过一年的应用、更新和完善，示例覆盖了Three.js绝大部分特性，还增加了许多优化的特性。

5.深度融合示例 _腾讯视频

欢迎关注微信公号【三维网格3D】，第一时间获取最新文章