企业官网建设流程全解析

如何把相机钻到地球内部：Cesium 地下空间可视化完整指南

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

读完这篇教程，你能用 Cesium 搭出一个可以"钻"进地下的三维场景：地表变透明、矿山模型悬在地下几百米、相机能贴着岩层穿行。Cesium 地下空间可视化的核心就三件事：地表透明化（translucency）、地下背景色（undergroundColor）、关闭相机碰撞检测。下面按"先看效果 → 懂机制 → 接数据 → 调手感 → 排坑"的顺序讲。

先看效果：一个能运行的最小 Demo

不绕弯子，直接说最终画面长什么样：相机从地表往下俯冲，地表贴图逐渐变得半透明，一座地下矿山 glTF 模型出现在你脚下，周围是深色渐变的地下空间。这就是仓库里现成的 Sandcastle 示例globe-translucency的效果。

把仓库拉到本地后跑起来：

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

打开 Sandcastle，在 globe-interior 示例里点 "Translucency rectangle"，北美西岸的地表立刻变得半透明，地下露出了一个黄色椭球（模拟地核）。

三个必须理解的机制

搞懂这三条，后面所有代码都是它们的组合。

1. 地表透明化不是"贴图变淡"，而是双通道叠加。globe.translucency.enabled = true打开后，Cesium 用frontFaceAlpha（0~1，越小越透）决定地面前侧面的透明度。它还支持按距离淡出：frontFaceAlphaByDistance是一个NearFarScalar，比如new Cesium.NearFarScalar(400.0, 0.0, 800.0, 1.0)表示相机距地表 400 米内完全透明、800 米外恢复正常，这正是"越下钻越透明"的观感来源。

2. 地下背景色靠距离渐变打底。相机低于地表后，背后那片"虚空"由globe.undergroundColor控制，undergroundColorAlphaByDistance（同样是 NearFarScalar）让颜色随下钻距离从透明渐浓到不透明，形成自然的"岩壁深处变黑"效果。

3. 默认相机是"怕碰地"的，必须先解禁。scene.screenSpaceCameraController.enableCollisionDetection = false一行不开，相机根本进不了地下，所有地下内容都白搭。

把地下装进地球：数据与模型接入

机制懂了，往里填东西。三条接入路径按常用程度排：

• glTF/GLB 模型：用viewer.entities.add({ model: { uri: "..." } })挂一个模型，把它的经纬度高程写成负数（如height: -500.0）就是地下。示例用的就是 ParcLeadMine 铅矿模型。
• 地形融合：地下内容要"嵌进"地形里，需要真实地形打底，terrain: Cesium.Terrain.fromWorldTerrain()开启世界地形后，模型的相对高低才有意义；矢量数据（多边形、折线）配合classificationType: Cesium.ClassificationType.TERRAIN可以贴在地表/地形上。
• 点云与分块数据：大规模地下扫描数据走 3D Tiles 流式加载，点云示例数据可直接验证分块效果。

顺序建议：先放模型看位置，再接地形，最后做透明化——否则你连"模型没显示"还是"地表挡住了"都分不清。

从能用到好用：交互、性能与视觉一锅端

交互层：在工具栏加一组切换项，比写死状态实用得多：

scene.screenSpaceCameraController.enableCollisionDetection = false; globe.translucency.enabled = true; globe.translucency.frontFaceAlpha = 0.25;

配合Sandcastle.addToolbarMenu挂"内核 / 外核 / 地幔 / 关闭"几个开关，用户就能像切图层一样切地下结构。想限制下潜深度，就在scene.postUpdate里读camera.positionCartographic.height，低于 -1000 米就钳回去。

视觉层：雾能立刻提升空间深度感，scene.fog.density = 0.0002配scene.fog.color = Cesium.Color.BLACK，地下越深雾越浓。注意透明化与混合排序的兼容性：初始化 Viewer 时设orderIndependentTranslucency: false，透明地表叠地下模型才不会出现奇怪的排序条纹。

性能层：大面积透明化 + 高密度瓦片是帧率杀手。优先用瓦片流式加载而不是整包塞入，打开磁盘缓存（Cesium 内置 cache 会把瓦片请求命中到本地，Network 面板里应能看到大量 (disk cache)），并用scene.fps/ 性能测试指南里的方法盯帧率。

踩坑与排错清单

• 现象：相机进不了地下，贴地就卡住→ 排查：是否漏了那行开关 → 解法：enableCollisionDetection = false，这步 90% 的人第一次都忘。
• 现象：地表透明了，地下模型看不见→ 排查：模型高程是否足够负、是否被undergroundColor的浓色盖住 → 解法：把undergroundColorAlphaByDistance.nearValue从 0.0 调大些，或先用DebugModelMatrixPrimitive画一条参考轴确认模型矩阵：

• 现象：透明区域边缘闪烁或透明失效→ 排查：是否用了orderIndependentTranslucency默认值 → 解法：初始化时显式设为false；只透明局部区域时改用translucency.rectangle = Cesium.Rectangle.fromDegrees(...)限定范围，代价更小。
• 现象：下钻后画面发灰、没深度感→ 排查：雾和地下色是否配置 → 解法：scene.fog.density = 0.0002起步微调，同时调浓farValue到 1.0。

继续往下走

• 示例索引：globe-interior（地表透明 + 内部结构）、globe-translucency（地下矿山 + 距离透明）、underground-color（地下背景色渐变）
• 源码入口：Globe.js，translucency 与 undergroundColor 两个属性的实现都在里面

延伸三个方向：把地下矿山换成城市地下管线，用折线 + 点做分层管廊；用 terrain-clipping-planes 示例切出"剖面"，直接看到地表以下的地层；或者结合 3D Tiles 的元数据做地下空间的按特征筛选与拾取。

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