CesiumJS 地下可视化：3 处配置，让浏览器相机钻入地球内部-平芜编程栈

CesiumJS 地下可视化：3 处配置，让浏览器相机钻入地球内部

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

CesiumJS 是一个用 WebGL 在浏览器中渲染三维地球的开源 JavaScript 库。当你的需求转向地下——看三维地质模型、做 WebGL 地下管网展示，而不是浏览地表时，它同样够用。本文围绕CesiumJS 地下可视化，拆解 3 处关键配置，带你在浏览器里搭出一个能钻入地下的场景，并解释每个首次出现的技术名词。

🎥 相机默认会被地表挡住

默认情况下，CesiumJS 的相机控制器开着碰撞检测（collision detection，防止相机穿进地形的开关）。你往地下飞，相机一碰到地表就被弹回来。所以第一步只有一行配置：

const scene = viewer.scene; scene.screenSpaceCameraController.enableCollisionDetection = false; scene.globe.translucency.enabled = true; scene.globe.undergroundColor = Cesium.Color.fromCssColorString("#0b0f1e");

enableCollisionDetection关掉后，相机可以随意穿越地形、飞到任意负高度；translucency.enabled则打开半透明（让地表部分透出背后内容）。但此时你钻下去只会看到一片黑——地表背面还没画东西，这正是下面两节要解决的。

🪟 给地表加一层可透视的外衣

想让地球内部露出来，CesiumJS 给了两条路，可以单选也可以叠加：

全局半透明：globe.translucency.enabled = true，把整张地表当玻璃看。
局部挖洞：给globe.translucency.rectangle指定一块经纬度矩形，只有那块变透明，其余照旧，适合"只切开一个剖面"。

如果底图是卫星影像，还能把某一整片颜色抠掉。仓库里 Globe Interior 示例（packages/sandcastle/gallery/globe-interior/）就是让海洋那片深蓝变透明，从而露出下面的地核、地幔：

const baseLayer = viewer.scene.imageryLayers.get(0); baseLayer.colorToAlpha = new Cesium.Color(0.0, 0.016, 0.059); // 海洋的颜色 baseLayer.colorToAlphaThreshold = 0.2;

colorToAlpha的意思是：凡是接近这个颜色的像素都算成透明，threshold越大，被抠掉的范围就越宽。

📍 把模型放进负高度空间

CesiumJS 用椭球面上的海拔（单位米）来定位物体，地下就对应负高度。给模型一个负height，它就落到地表以下，再配上随深度淡入的背景色：

const g = viewer.scene.globe; g.undergroundColorAlphaByDistance.near = 500; g.undergroundColorAlphaByDistance.far = 30000; g.undergroundColorAlphaByDistance.nearValue = 0.0; g.undergroundColorAlphaByDistance.farValue = 1.0; viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-3.82, 53.11, -500), model: { uri: "models/ParcLeadMine.glb" } });

undergroundColorAlphaByDistance是这节的重点：它定义一段距离区间，让"地下背景色"随着你离地表越来越远，从全透明线性渐变到全不透明。效果是——刚钻进地表时背景几乎看不见，越往深处底色越实，模型自然浮现，而不是糊在一团黑里。

🏭 两个典型场景怎么落地

常见的应用方向有一堆，这里只深挖两个，其余一句带过。

地质与矿产剖面：把仓库自带的ParcLeadMine模型（Apps/SampleData/models/ParcLeadMine/）放到负高度，接上上面的地色渐变，就是一个能旋转、能钻入的矿产剖面。隧道掘进监控、矿藏储量展示走同一套：模型 + 负高度 + 底色渐变。

城市地下管网：管线本质是大量重复的几何体。做法是用 Polyline 或 3D Tiles 按真实坐标把管网建出来，管径与埋深映射到负高度；阀门、接头这类重复管件用实例化渲染省内存。查询交互挂在scene.pick上，点哪段管子就弹哪段管子的属性。

至于地下空间规划、地质雷达数据叠加，思路一致：换掉模型与数据，配置几乎不用动。

⚠️ 三个容易踩的坑

深度冲突（Z-fighting）：两个几乎贴在一起的地下平面在屏幕上互相闪烁。解法是把两层在负高度上错开几米，或给后一层调整depthTest、renderOrder。
近裁剪面切模型：相机贴太近时，近裁剪面（视锥体离相机最近的那个面）会把地下模型从中间切掉。保持相机与模型的安全距离，或调小camera.nearToFarDistance。
一次加载太多：地下网格密度高，整城模型一把梭会卡死。按 tile 分块、配合磁盘缓存按需加载，CesiumJS 的 3D Tiles 机制天然支持，调优细节见Documentation/Contributors/PerformanceTestingGuide/。

✅ 下一步可以直接做的三件事

打开packages/sandcastle/gallery/globe-interior/，改一行颜色，先亲眼看到地球内部。
把任意.glb模型的位置高度改成负数，再加一段undergroundColorAlphaByDistance，验证"钻下去有背景"。
给管网数据接上scene.pick，做出第一个"点管线弹属性"的交互。

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

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