企业官网建设流程全解析

CesiumJS地下空间可视化：30分钟"看穿"地球的实操路径

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

CesiumJS 是一款开源的 JavaScript 三维地球库。用仓库里现成的几行 API，它能让你把浏览器里的地球"调透光"，把地下几十米的矿井模型、内核外核的分层结构直接摆在地球内部。本文所有代码都取自仓库内的真实示例文件，照抄就能跑。

📍 谁在真用地下空间可视化

• 地铁规划工程师：向甲方讲解线路下穿深度时，把地表调成半透明，地下管线模型一目了然。
• 地理课教师：用三个椭球实体搭出内核、外核、地幔，一键切换讲解地球分层。
• 矿山/BIM 工程师：把实景扫描的矿井 glb 模型放进地球，直接叠加在地形上对比。

仓库里的 Sandcastle 示例库恰好为这三类需求各准备了一个可直接运行的例子，下面按"从克隆到跑通"的顺序走一遍。

⚡ CesiumJS 最小上手路径

第1步：克隆并启动官方开发服务器

仓库自带开发服务器和示例入口，无需任何额外配置：

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

浏览器打开本地地址后进入 Sandcastle 示例页，左侧目录就是全部示例。

第2步：先跑通三个官方地下示例

打开这三个示例，能直接看到本文要讲的全部效果，建议先看完再动手：

• packages/sandcastle/gallery/globe-interior—— 地球分层结构 + 地表透明化
• packages/sandcastle/gallery/globe-translucency—— 矿区模型叠加半透明地形
• packages/sandcastle/gallery/underground-color—— 相机入地后的背景过渡

第3步：把核心代码抄进自己的页面

下面这段合并了示例里的关键设置：关碰撞、开透明、放一个地下模型，十几行就是最小可用形态：

const viewer = new Cesium.Viewer("cesiumContainer"); const globe = viewer.scene.globe; viewer.scene.screenSpaceCameraController.enableCollisionDetection = false; // 允许相机入地 globe.showGroundAtmosphere = false; globe.translucency.enabled = true; globe.translucency.frontFaceAlpha = 0.25; // 0.25 表示地表 75% 透明 viewer.entities.add({ name: "Mine model", position: Cesium.Cartesian3.fromDegrees(-3.825, 53.117, 0), model: { uri: "ParcLeadMine.glb" }, });

模型文件仓库里就有：ParcLeadMine.glb，是英国一座废弃铅锌矿的实景三维模型。

🔧 按"我想实现 XX"拆的三种玩法

只让指定经纬度区域透明

最终效果：地球整体不透明，只有比如美国西海岸那一片"透光"，地下模型仅在该区域内可见。实现上给globe.translucency.rectangle赋一个Cesium.Rectangle.fromDegrees生成的矩形即可，globe-interior 示例的 "Translucency rectangle" 菜单按钮就是这么做的。

透明度随距离淡出

最终效果：相机贴近地表时地面几乎不透明，拉远后逐渐变透，避免"全球一片幽灵地球"的观感。做法是把globe.translucency.frontFaceAlpha换成frontFaceAlphaByDistance（一个NearFarScalar），指定近处和远处的透明度，globe-translucency 示例里配了个滑块可以实时调。

相机入地后背景由黑变柔和

最终效果：相机穿到地表以下时，画面不会瞬间切死黑，而是由透明到不透明地渐入。globe 上有undergroundColor和undergroundColorAlphaByDistance两个属性，分别控制颜色与"近距透明、远距不透明"的过渡区间，underground-color 示例的四个滑块对应的就是它们。

💡 Cesium 地下空间可视化踩坑清单

坑一：相机贴着地面弹不开，钻不下去症状：按住鼠标往下拽，相机像撞了墙一样弹回地表。 原因：screenSpaceCameraController默认开启碰撞检测，禁止相机进入地球内部。 解法：初始化后立刻设scene.screenSpaceCameraController.enableCollisionDetection = false，三个官方示例的第一行有效代码全是它。

坑二：地表调透了，地下模型却被"海"挡着症状：陆地变透明了，可放在海上的模型还是被蓝色遮挡。 原因：透明化只作用于地形，底图层的海水颜色是不透明的。 解法：对底图图层设colorToAlpha加colorToAlphaThreshold，把接近海水色的像素抠掉，globe-interior 示例的 "Translucency mask" 分支正是这个套路。

坑三：二次打开页面，3D Tiles 加载慢到卡顿症状：首刷正常，反复刷新后加载时间忽长忽短。 原因：大量瓦片每次都在重新请求，带宽浪费严重。 解法：用 Cesium 自带的磁盘缓存，网络面板里看到(disk cache)命中即说明生效：

🧭 延伸探索

想继续深挖，直接读这几个文件比看博客高效：

• 示例源码：globe-interior/main.js、globe-translucency/main.js、underground-color/main.js
• API 实现：Globe.js（translucency、undergroundColor属性定义处）与 GlobeTranslucency.js

读完本文可以马上做的一件事：打开 globe-translucency 示例，把frontFaceAlphaByDistance的近处透明度从 0 拖到 0.5，看矿区模型是如何从"贴着地面"变成"悬在透光地面之上"的。

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