Cesium三维地下空间可视化指南：5分钟看透地球-育师

Cesium三维地下空间可视化指南：5分钟看透地球

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

Cesium 是一款开源 JavaScript 三维地球渲染引擎，用 WebGL 让地下空间可视化直接在浏览器里运行：地表透明化、相机潜入地球内部、展示矿井管线等结构。照下面的做法，30 分钟就能搭出一个地质剖面演示。

为什么“看透地球”不容易

想在浏览器里展示地表之下的管线、矿井或地质分层，最先遇到的问题是：地表会一直“挡住”视线，不透明的地球就像一层撕不掉的外皮。二维地图表达不了纵深，通用三维引擎又没有真实地球坐标系，模型放得进去，空间感却出不来。

核心能力速览

地表透明化：通过globe.translucency控制地球整体或局部区域的透明度，把地表“揭开”露出地下内容
地下相机漫游：一行代码关闭地形碰撞检测，相机可以直接潜进地球内部
地下结构建模：椭球等基本图元就能搭分层结构，精细的设施模型可导入 glTF/GLB
地下环境控制：undergroundColor与fog.density分别控制地下背景色和雾的浓度，营造纵深感
3D Tiles 流式加载：海量地下数据按距离分块加载，不会把浏览器卡死

最小可运行示例：三步得到透明地球

地下空间可视化的起点就是让地表变透明：先关碰撞，再开透明化。

const viewer = new Cesium.Viewer("cesiumContainer", { orderIndependentTranslucency: false }); const scene = viewer.scene; scene.screenSpaceCameraController.enableCollisionDetection = false; scene.globe.translucency.enabled = true; scene.globe.translucency.frontFaceAlpha = 0.25;

跑完这段代码，地球表面会变成 25% 的透明度，鼠标直接拖进地表也不会被弹回来。不想自己搭页面的话，先把仓库拉下来：

git clone https://gitcode.com/GitHub_Trending/ce/cesium cd cesium && npm install

然后按 README.md 的说明启动项目，打开 globe-interior 示例，你会看到一个可以切换内核、外核、地幔的完整演示。

进阶玩法与组合技巧

区域透明掩码的三步设置

不想让整片地表都透明，可以用rectangle只在指定区域“开个窗口”：

scene.globe.translucency.rectangle = Cesium.Rectangle.fromDegrees( -120.0, 0.0, -30.0, 45.0 );

效果是地表出现一块半透明的矩形区域，地下模型只在这个范围内被“看见”。

用椭球体搭建分层内核结构

经典地质剖面的做法是三层嵌套椭球，都放在地心（坐标原点）：

viewer.entities.add({ position: Cesium.Cartesian3.ZERO, ellipsoid: { radii: new Cesium.Cartesian3(1250000, 1250000, 1250000), material: Cesium.Color.YELLOW } });

把 radii 依次改成 3450000 和 6300000、material 换成 ORANGE 与 RED，就叠出了外核和地幔。

调雾效与地下颜色增强纵深感

scene.globe.undergroundColor = Cesium.Color.BLACK; scene.fog.density = 0.0012;

地下背景会变暗、远处更朦胧，空间层次感立刻出来；效果不明显时可以继续加大 density（默认 0.0006）。如果地下设施是大规模 3D Tiles 数据，引擎会按相机距离分块流式加载，可以先在 gallery 的 3D Tiles 示例里感受一下性能表现：

常见误区与调试思路

透明设置不生效→ 先确认translucency.enabled = true是否已设置，frontFaceAlpha等参数只有开启后才生效，且取值必须在 0-1 之间
相机钻不进地下、总被弹回→ 碰撞检测默认开启，用enableCollisionDetection = false关掉；想限制最小深度，可以在postUpdate里读取当前高度把相机拉回
地下模型看不见或地表仍然遮挡→ 先关掉globe.showGroundAtmosphere；如果画面整体被一层颜色盖住，把globe.undergroundColor设为undefined即可禁用地下着色

延伸资源

官方文档：Documentation/ — 模块文档与贡献者指南，含性能测试和测试指南
地球内部示例：packages/sandcastle/gallery/globe-interior/ — 内核/外核/地幔与地表透明化的完整演示
距离渐变示例：packages/sandcastle/gallery/globe-translucency/ — 地表透明度随距离渐变，带真实矿井模型
地下颜色示例：packages/sandcastle/gallery/underground-color/ — 试用不同的 undergroundColor 取值
透明化源码：packages/engine/Source/Scene/GlobeTranslucency.js — 透明化对象的完整属性定义
地球源码：packages/engine/Source/Scene/Globe.js — undergroundColor 等属性所在位置
社区：在项目 Issue 与讨论区按underground或translucency关键词搜索，能找到相关问题的最新讨论

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

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考