企业官网建设流程全解析

CesiumJS 地下可视化完整指南：从地表到地下，4 步打通透明地球

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

你能不能在浏览器里直接"钻"到地表以下，看清隧道、管线和矿层？CesiumJS 是一个开源的三维地球 JavaScript 库，它的地下可视化能力只需几行配置，就能把普通 Web 地图变成一台可俯冲、可透视的"X 光地球"。🌍

地下可视化能为你的项目省下什么

• 零学习成本：globe.undergroundColor一个属性就能打开地下世界，不用自己写渲染管线。
• 一套地球两用：地表与地下共用同一套坐标系和相机，地上管网、地下管线无缝切换。
• 交互开箱即用：点击拾取、属性查询、分屏对比等通用能力直接复用到地下物体上。
• 效果可调：地下底色、淡入距离、半透明地球都支持运行时修改，适合做控制台面板。

原理速览：相机如何"沉入"地球

CesiumJS 的地下模式并不复杂，本质是三件事：

1. 关掉碰撞检测——默认相机不许低于地表，关掉后鼠标缩放就能一路往下钻；
2. 给地下一个底色——相机潜入地表下时，地球背面用undergroundColor渲染并按距离与地表画面混合，形成"从地表到地底"的渐变；
3. 用负高度摆物件——把模型或点的位置高度设为负值（如-500米），它就稳稳挂在地下。

动手路线：4 步搭出你的第一个地下场景

第 1 步：克隆仓库并跑起示例

git clone https://gitcode.com/GitHub_Trending/ce/cesium

第 2 步：打开地下入口（核心配置）

const viewer = new Cesium.Viewer("cesiumContainer"); const scene = viewer.scene; // 允许相机进入地下（碰撞检测默认开启，会挡在地表） scene.screenSpaceCameraController.enableCollisionDetection = false; // 地下底色：默认黑色，换成浅灰更接近"岩层"观感 scene.globe.undergroundColor = Cesium.Color.LIGHTSLATEGRAY;

第 3 步：把物体摆到地下，并让相机飞下去

// 高度为负值 = 低于地表 500 米 viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-3.82518, 53.11728, -500.0), model: { uri: "your-mine-model.glb" }, // 换成你自己的三维模型 }); scene.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(-3.82518, 53.11728, -500.0), orientation: { heading: 0, pitch: Cesium.Math.toRadians(-20), roll: 0 }, });

第 4 步：调淡入节奏，让过渡更自然

相机贴近地表时地下色几乎不出现，越往下越浓，避免"一钻进地就一片黑"：

const a = scene.globe.undergroundColorAlphaByDistance; a.near = 1000; // 距地表 1000 米开始淡入 a.nearValue = 0.0; a.far = 1000000; // 100 万米处完全显示底色 a.farValue = 1.0;

想直接抄答案的话，仓库自带 underground-color 示例 和 globe-interior 示例，属性默认值定义在 Globe.js。

关键参数速查表

避坑清单

• 现象：鼠标缩放怎么都钻不进地下。原因：碰撞检测默认开启，相机被地表挡住。解法：设enableCollisionDetection = false（见第 2 步）。
• 现象：相机刚入地下画面就一片漆黑，看不清模型。原因：undergroundColor默认黑色且默认淡入距离较宽，深色底把浅色模型"吞"了。解法：改用浅灰/深蓝色，或调大near让底色更晚出现。
• 现象：多个地下物件贴近时闪烁（Z-fighting，深度冲突）。原因：两个面在深度缓冲里几乎重合。解法：让层与层之间留出合理高程差，管线类重复构件用实例化而非逐件建模。

进阶与延伸

• 透明地球 + 地壳分层：用globe.translucency配colorToAlpha把海洋抠成透明，地球变成"水晶球"，内核对地幔逐层切换，参考 globe-interior 示例。
• 分屏对比方案：scene.splitPosition拖动分屏线 +SplitDirection.LEFT/RIGHT给实体指定归属侧，做"改造前/改造后"汇报页非常加分。
• 真实地下设施：仓库里的 ParcLeadMine 铅矿模型 是现成的地下三维资产，适合直接替换进你的管线。
• 剖面分析：结合裁剪平面（ClippingPlane）沿隧道切开模型，内部构造一目了然。

💡 现在就 clone 下来，把相机参数改成你城市地下管廊的坐标——你的第一个"透明地球"，离手只有 4 步之遥。👇

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