企业官网建设流程全解析

Cesium 地下空间可视化完整指南：地表透明化、地下建模与性能优化一步到位

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

想让地铁隧道、矿井巷道、地质分层「浮」在浏览器里给你看，Cesium 的地下空间可视化方案比想象中更直接：它把整颗地球渲染在 WebGL 画布上，再给你一个globe.translucency透明化开关——地表一「洗淡」，藏在下面的内容就露出来了。本文带你走通 Cesium 地下空间可视化的完整链路：环境搭建 → 地表透明化 → 地下建模 → 环境美化 → 交互控件 → 规模化与性能，每一步都有对应示例和参数，照着做就能出自己的效果。

先看效果：把「地下空间可视化」拆成三步

在 Cesium 里做地下可视化，本质上就三件事，顺序不能乱：

1. 透明——让地表「洗淡」，露出下面的内容（globe.translucency）；
2. 成型——往地下放东西：几何体、glTF 模型或 3D Tiles；
3. 好看——底色、雾效、大气，调出深度感。

理解这条主线，后面所有 API 都能各归其位。

搭好 Cesium 开发环境，把第一个场景跑起来

先克隆仓库并启动本地开发服务器（需要 Node.js 22 及以上）：

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

npm start会起一个本地服务器，浏览器打开后默认进入Sandcastle沙箱——Cesium 官方的在线试验场，所有示例改完即刷新。做地下可视化，建议先打开沙箱里的两个现成案例：globe-interior（地球内部分层结构）和 globe-translucency（透明化配合地下 GLB 模型）。

把地表调成半透明：globe.translucency 的两种写法

透明化的核心是Globe实例上的translucency对象，默认关闭。最小可用代码：

const globe = viewer.scene.globe; globe.translucency.enabled = true; // 开关 globe.translucency.frontFaceAlpha = 0.25; // 0~1，越小地表越"洗淡"

frontFaceAlpha只接受一个固定值。如果你只想让某一小块区域变透明（比如矿区上方），再加一个矩形：

globe.translucency.rectangle = Cesium.Rectangle.fromDegrees(-120, 0, -30, 45); // 只有矩形范围内的地表按 frontFaceAlpha 淡出，其余保持原样

还有两个进阶旋钮，官方示例 GlobeTranslucency.js 里有完整定义：

• frontFaceAlphaByDistance：按相机距离插值透明度，用NearFarScalar配置——相机贴近地表时透明、拉远后自动恢复不透明，兼顾局部观察和全局观感；
• backFaceAlpha：注意一个反直觉细节——相机钻到地下后，前后表面会互换，所以从地下往上看"壳"的透明度由backFaceAlpha说了算。

往地下放内容：几何体、glTF 模型与 3D Tiles 三种路线

前提是一行：允许相机进入地下。

viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;

之后把相机降到负海拔，地球"壳"就不会挡住你了。放内容有三条路线，按数据量级选：

• 基本几何体：分层示意最省事，一个实体挂一个椭球就是一层。

viewer.entities.add({ name: "InnerCore", position: Cesium.Cartesian3.ZERO, // 地球球心 ellipsoid: { radii: new Cesium.Cartesian3(1250000, 1250000, 1250000), material: Cesium.Color.YELLOW, }, });

• glTF/GLB 模型：矿井、地铁车站这类精细对象，entities.add({ model: { uri } })即可加载，Cesium 会自动完成地理坐标到本地坐标的换算；
• 3D Tiles：工程级数据的正解，Cesium.createTileset一行接入，按视口流式加载，天然带 LOD 和剔除，后面性能一节会细讲。

仓库里的 MilkTruck 示例模型 这类 GLB/GLTF 资源，放进沙箱就能体验完整的模型加载链路。

调好地下环境：底色、雾效与大气光晕三个参数

透明化只是"露出来"，好不好看靠环境参数：

• 地下底色：相机在地下时，地球背面会以undergroundColor着色（默认黑色）。想提高模型对比度就换个颜色，设回undefined可关闭。

globe.undergroundColor = Cesium.Color.SKYBLUE;

配套的undergroundColorAlphaByDistance（NearFarScalar）控制底色按距离混合的强度。

• 雾效：scene.fog是营造纵深的主力。density决定雾的浓淡（默认 0.0006），再配合height限制雾生效的海拔区间，低空钻洞时雾会自然聚拢，立体感立刻出来。
• 地表大气光晕：透明化之后，showGroundAtmosphere留下的那圈蓝色光晕容易"穿帮"，官方 globe-interior 示例的做法就是直接关掉它，再把baseColor设为Cesium.Color.TRANSPARENT，画面才干净。

加上交互控件：层级切换、透明度滑杆与一键重置

演示给非技术同事看时，没人想翻代码改参数。globe-interior 示例给了一套可直接抄的交互套路：工具条菜单切换"地核 / 外核 / 地幔"层级，本质就是切换对应实体的show属性：

Sandcastle.addToolbarMenu([ { text: "Inner Core", onselect: () => (innerCore.show = !innerCore.show) }, ]);

再补两个就成完整控件组：透明度滑杆（oninput里实时写frontFaceAlpha）和一个"重置"按钮（恢复enabled、rectangle、baseColor等所有改动过的值）。建议把改动过的参数都存进一个reset()，演示时不怕点花。

上规模：3D Tiles 流式加载与透明渲染性能优化

数据一大，两个坑最疼：

1. 透明渲染太贵。orderIndependentTranslucency（屏幕空间透明）默认开启，视觉更稳但开销大。globe-interior 示例初始化时就把它关掉：

const viewer = new Cesium.Viewer("cesiumContainer", { orderIndependentTranslucency: false });

配合translucency使用时，先关掉它观察帧率，再决定要不要为视觉效果买单。

2. 数据全量加载。地下设施别一口气塞进场景，交给 3D Tiles：分块、LOD、视锥体剔除都是格式的内置能力，只加载当前视口真正要显示的瓦片。另外scene.fog.density不只是美化——引擎会用它做雾剔除，完全被雾吞掉的地形瓦片直接不加载，远距离漫游时省下一大截流量和显存。

接入你的数据：CZML、glTF、3D Tiles 与点云怎么选

BIM 侧的 IFC 模型一般先转换或封装成 glTF / 3D Tiles 再进 Cesium，这条链路社区和厂商都有现成工具。

踩坑排查：相机失控、穿模与透明不生效的常见原因

• 相机钻进地下后方向感全丢：加回碰撞检测，或用postUpdate事件监听相机高度，低于 -1000 米就强制拉回，别让用户"掉进地心"。
• 透明区域里看不到地下模型：八成是enableCollisionDetection没关，相机实际停在地表；再检查模型有没有被clampToGround之类的选项吸到表面。
• frontFaceAlpha改了没反应：确认globe.translucency.enabled是true；如果相机在地下，调的该是backFaceAlpha（见前文"前后表面互换"的细节）。
• 透明化后画面发灰发脏：大概率是大气光晕，按前面"调好地下环境"一节关掉showGroundAtmosphere。

学习资源与行动清单

继续深挖，按这个顺序看：

• 官方沙箱示例：globe-interior、globe-translucency、underground-color；
• 引擎源码：Globe.js、GlobeTranslucency.js、Fog.js；
• 贡献者文档：Documentation/（构建、测试、性能测试等指南）。

行动清单，建议按序推进：

1. 跑通npm start，打开 Sandcastle 的 globe-interior；
2. 拖动frontFaceAlpha与rectangle，看懂"全局"与"区域"两种透明化的差异；
3. 往地下放三层椭球 + 一个 GLB 模型，搭出自己的分层示意；
4. 用Sandcastle.addToolbarMenu加上层级切换与重置按钮；
5. 换成自己的 3D Tiles 数据，调fog与undergroundColor收尾；
6. 压测帧率，必要时按前文关闭orderIndependentTranslucency。

做到第 5 步，一个能演示、能交互、数据可替换的 Cesium 地下空间可视化应用就成型了。

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