企业官网建设流程全解析

3行代码透视地球内部：Cesium WebGL地下空间可视化实战笔记

【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium

管线一断，你要的第一张图往往是三维剖面，可二维地图根本画不出地下世界。剖面图纸是死的，模型文件又大，业务方看着都不直观。其实在Cesium三维地下空间可视化里，这件事是「翻开关」级别的：把地表调成透明的，让相机钻下去，地下模型摆上，几行代码就能给地球拍一张「X光片」。这篇文章先讲清原理，再跑通一个最小「透视地球」demo，最后分享三个我踩过的坑。

把地表调成玻璃：透视的本质

透视地下，本质是三件小事配合完成。一是让地表变玻璃——影像和地形还在那里，只是不再挡视线；二是让相机能穿过地面，默认它是进不了地下的；三是真往地下摆点东西，不然看穿了也没东西可看。三样缺一不可：只开透明，相机照样停在表面；能进地下却没模型，看到的就是一个黑窟窿。

上图来自官方分屏示例：一条线把地球劈成两半，左右可以各显示一种状态，「透」与「不透」的对比一眼可见，调参数时把前后效果并排对照很方便。

要翻哪些开关：globe.translucency 与相机碰撞检测

这些开关集中在 globe 和相机控制器上，每翻一个，效果各不相同。

globe.translucency.enabled是总闸：开启后地表渲染从「不透明」变成「半透明」，地下模型立刻透出来。它挂在 globe 下，是个可细调的对象而不是单一参数。

globe.translucency.frontFaceAlpha是透明度数值，0到1之间：1是完全不透明，0是全透，0.25 左右像隔着一层玻璃窗看地下。旁边还有个frontFaceAlphaByDistance，按相机距离插值透明度，可以让只有靠近时才透。

globe.translucency.rectangle把透明范围限定在一个矩形区域，地球其他地方不受影响——「只挖一口坑看地下」就是它的用途。

相机这边是scene.screenSpaceCameraController.enableCollisionDetection：开着时（默认）相机到地表就停住，关掉它才能扎进地里。globe.undergroundColor负责相机入地后的背景色，默认黑色，换成深蓝会有种「深地」的感觉。

globe.translucency.enabled = true; // 地表透明总开关 globe.translucency.frontFaceAlpha = 0.25; // 越小越透 globe.undergroundColor = Cesium.Color.BLACK; // 入地后的背景色

最小demo：初始化、透明化、让相机钻进去

准备工作不多，一个HTML页面就够。引入 Cesium、建好 Viewer 拿到 globe 对象之后，demo 的主线其实只是翻两个开关、摆一个模型：

const viewer = new Cesium.Viewer("cesiumContainer"); const globe = viewer.scene.globe; viewer.scene.screenSpaceCameraController.enableCollisionDetection = false; // 允许入地 globe.translucency.enabled = true; // 地表透明 globe.translucency.frontFaceAlpha = 0.3; // 透明度

接着在地心摆一个半径1250公里的黄球，代表「地核」：

// 地心放一个黄色球体，代表地核 viewer.entities.add({ position: Cesium.Cartesian3.ZERO, ellipsoid: { radii: new Cesium.Cartesian3(1.25e6, 1.25e6, 1.25e6), material: Cesium.Color.YELLOW } });

跑起来之后，把相机拉远，地球表面已经是一层玻璃壳；滚轮推近，相机钻入地下，暗处里那个黄球就亮出来了。一个「透视地球」，齐活。

相机扎进场景后的第一人称视角，三维模型四面八方把你围住——这就是关掉碰撞检测后拿到的「地下漫游」状态。

想让画面更真？做这三件事

demo 跑通后，剩下的都是打磨。光照、雾化、层级切换，做完这三样画面就「像那么回事」了。

光照：相机在地下时，太阳被地表挡住，画面会暗得发闷。把globe.showGroundAtmosphere设为false去掉地面大气干扰，或显式给场景补一个光源方向与强度，模型细节立刻立起来。

雾化：scene.fog的 density 和 color 控制纵深。薄薄一层雾，让远处的地下物体渐次淡出，空间感立体很多；别调太浓，否则连地核都糊没了。

层级切换：地下模型分好几层（地核、外核、地幔）时，最简单的办法是切entity.show。官方示例「地球内部」就是这么干的：三个不同半径的球，工具栏一点就换层。

给地下模型定坐标时，最省事的办法是在模型原点画一组坐标轴：DebugModelMatrixPrimitive会把 XYZ 三轴按红绿蓝渲染出来，位置摆歪了一眼就能看出来。

翻车记录：相机失控、帧率骤降、模型穿帮

相机失控。现象：钻下去后相机越走越深，画面全黑，很难拉回来。原因：碰撞一关，相机完全自由，一旦越过近裁剪面（屏幕能显示的最小距离）就把模型全裁没了。一句话解法：在postUpdate里加一个高度下限，低于阈值就把相机抬回去。

viewer.scene.postUpdate.addEventListener(() => { const carto = viewer.camera.positionCartographic; if (carto.height < -1000) carto.height = -1000; // 最深地下1000米 viewer.camera.positionCartographic = carto; });

帧率骤降。现象：透明一开、地下模型一多，帧率从 60 掉到 20。原因：透明渲染让地表正反面都要画，模型数量又往上叠。解法：用frontFaceAlphaByDistance只在相机附近透明，地下模型改用 3D Tiles（一种自动分块流式加载的三维数据格式）加载，让引擎自己剔除看不见的部分。

模型穿帮。现象：地心的球看不见，或模型被「地球壳」吞掉。原因：地表默认渲染顺序和剔除策略在地下与在表面时并不一样。解法：先确认translucency.enabled开着、orderIndependentTranslucency设为false，还不行就把frontFaceAlpha调低，或把模型挪出遮挡层。

资源清单：从示例到源码

• packages/sandcastle/gallery/globe-interior/：官方「地球内部」示例，地核、外核、地幔三层球体，可直接运行
• packages/sandcastle/gallery/globe-translucency/ 与 packages/sandcastle/gallery/underground-color/：透明的两种做法（掩码、矩形区域），以及地下背景色的调法
• packages/engine/Source/Scene/Globe.js：源码入口，globe 的全部渲染参数都在这里
• 克隆仓库运行：git clone https://gitcode.com/GitHub_Trending/ce/cesium，然后npm install && npm start

把这几个开关翻完，地下世界就不在剖面图纸里，而在你的鼠标滚轮底下。下一步就是把黄球换成你自己的管线模型，剩下的只是调数字。

【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium