news 2026/9/11 1:30:28

怎么在浏览器里看到地下：Cesium地下空间可视化完整指南

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
怎么在浏览器里看到地下：Cesium地下空间可视化完整指南

怎么在浏览器里看到地下：Cesium地下空间可视化完整指南

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

做地质研究、管地下管线的时候，你大概遇到过这种场面：要给别人讲地层结构或矿井布局，要么翻出笨重的桌面三维软件，要么只能拿平面图对着念。其实不用这么麻烦——Cesium地下空间可视化就是干这个的：在 WebGL 里把地表调成半透明，把矿井、管线模型埋到地面以下，再让镜头跟着你一路钻进地下。这篇指南会带你从"地球内部分层"一路做到"矿井地下漫游"，全程只需要几行 API。

能力速览：Cesium 能帮你把地下翻出来吗

一句话定位：Cesium 是 Apache 2.0 协议的 JavaScript 库，主业是在浏览器里做世界级 3D 地球和地图，而它内置的 Globe 透明化能力正好能反过来"看穿"这颗地球。

和地下场景直接相关的核心能力有 4 条：

  • 🌍地表透明化（Translucency）：地球正面可以整体半透明，也能只让一个经纬度矩形区域透明
  • ⛏️地下背景与深度渐变（undergroundColor）：给地下空间指定背景色，并按相机距离控制不透明度
  • 🎮相机可入地：关掉屏幕空间控制器的碰撞检测后，视点可以飞到负高程
  • 📦灵活的地下内容：从椭球图元（做地球内核）到 glTF/GLB 模型（做矿井、隧道）都能放
你想做的事对应的解法
展示地核、地幔分层entity + ellipsoid，三个半径不同的椭球套娃
地下矿井/管线模型可见translucency 透明化 + model 实体置于负高程
镜头钻进地下去"走"enableCollisionDetection = false
制造纵深感、避免一锅黑undergroundColorAlphaByDistance 距离渐变

五分钟跑通一个能看地下的场景

先把仓库拉下来跑起来：

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

接着写最小示例。这里的关键是两件事：让相机能进地下，让地表透起来。

const viewer = new Cesium.Viewer("cesiumContainer"); // 关闭碰撞检测，否则镜头会被地面"挡住"进不去 viewer.scene.screenSpaceCameraController.enableCollisionDetection = false; // 打开地球透明化，正面透明度 0.25 viewer.scene.globe.translucency.enabled = true; viewer.scene.globe.translucency.frontFaceAlpha = 0.25;

就这四行，地球表面已经变成一层"玻璃"。仓库里自带的 globe-interior 示例 就是在这个骨架上再加三层椭球做地球内部结构，可以直接照着改。

实战核心：地下可视化三件事

三行代码让地表透明

效果：地面变半透明后，藏在下面的模型、矢量面、管线立刻显形，就像给地球开了 X 光。

核心代码：最省事的就是前面用过的translucency.enabled = true加frontFaceAlpha（0~1，越小越透）。如果你想只对某一地区透明、别处保持原样，就把范围锁死在一个矩形里：

globe.translucency.rectangle = Cesium.Rectangle.fromDegrees(-120, 0, -30, 45)，即西经 120°~30°、北纬 0°~45° 的区块。

提示：还有一种"颜色遮罩"玩法——用影像图层的colorToAlpha把海洋这种纯色区域抠掉（官方 globe-interior 示例里就是把蓝色海洋抠成透明），适合只想"挖掉某类地物"的场景。

怎么把模型放进地下

效果：矿井、隧道模型被埋在地表以下，地表透明后从上方"看穿"，镜头再飞近就能贴着模型走。

核心代码：给实体一个负高程的位置，再挂上模型即可。仓库自带一座真实的铅矿模型：

// 高程 -500 表示埋在地面以下 500 米 const position = Cesium.Cartesian3.fromDegrees(-3.825, 53.117, -500); viewer.entities.add({ position, model: { uri: "../../SampleData/models/ParcLeadMine/ParcLeadMine.glb", }, });

提示：模型坐标系对准经纬度时，先用 DebugModelMatrixPrimitive 这类调试手段确认矩阵没跑偏，能省半天排查时间。

怎么做出纵深感

效果：镜头进入地下后，屏幕不再是"一锅黑"，而是近处隐约可见、深处逐渐沉入背景色，天然带出空间纵深。

核心代码：给地下指定一个背景色，再用按距离变化的不透明度拉开层次：

globe.undergroundColor = Cesium.Color.BLACK; // 地下背景色 // 相机附近 1 千米内完全透明，1000 千米外完全不透明 globe.undergroundColorAlphaByDistance.near = 1000; globe.undergroundColorAlphaByDistance.nearValue = 0.0; globe.undergroundColorAlphaByDistance.far = 1000000; globe.undergroundColorAlphaByDistance.farValue = 1.0;

提示：调 near/far 两个距离就是调"雾墙"的厚度，近处太黑就往前挪 nearValue，远处太透就压低 farValue。

避坑指南：地下漫游的三个高频问题

现象一：相机死活钻不进地下，拖到地面就停住原因：screenSpaceCameraController的碰撞检测默认开启，地面会一直"顶"住镜头；另外frontFaceAlpha = 1时地表不透明，就算进去了也看不见东西。 解法：enableCollisionDetection = false打开入口，再配translucency保证通透，两者缺一不可。

现象二：一进地下就一片死黑，模型像贴在黑纸片上原因：默认地下背景是单一黑色，没有距离层次，深度信息全丢了。 解法：启用上一条讲的undergroundColorAlphaByDistance渐变；模型多的话，把undergroundColor换成深灰（如Color.LIGHTSLATEGRAY）再对比一下，模型轮廓会清楚很多。

现象三：地下数据一多，帧率肉眼可见地掉原因：地下模型默认全量细节加载，相机又离得近，绘制量直接爆表。 解法：大块地下数据别用单个 glb，拆成 3D Tiles 做流式加载与 LOD，视口外自动剔除；同时给地下场景加一层雾（scene.fog），远处的几何体被雾吃掉，视觉上和性能上都是双收益。

资源与下一步

想继续深挖，直接去这些地方翻：

  • 官方文档目录：Documentation/
  • 地球内部示例：packages/sandcastle/gallery/globe-interior/
  • 地下背景色示例：packages/sandcastle/gallery/underground-color/
  • Globe 透明化 API 源码：packages/engine/Source/Scene/Globe.js
  • 矿井样本模型：Apps/SampleData/models/ParcLeadMine/

下一步你可以直接动手：

  1. 打开 globe-interior 示例，在工具栏切换 "Translucency mask" 和 "Translucency rectangle"，对比两种透明化方式的差异
  2. 把frontFaceAlpha从 0.25 一路调到 0.05，感受透明度对地下模型可读性的影响
  3. 换成你自己的管线或隧道 glTF 模型，放到负高程上，再叠加 underground-color 示例里的距离渐变，做出属于自己项目的地下漫游效果

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

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

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/9/11 1:29:02

AngularJS中$q.when()的异步编程实践与优化

1. 理解$q.when()的核心定位在AngularJS的异步编程体系中，$q.when()是一个常被忽视但极具实用价值的工具函数。它的核心作用是"规范化处理值或承诺"，简单说就是无论你传入的是普通值还是Promise对象，它都能统一返回一个Promise。这…

作者头像 李华
网站建设 2026/9/11 1:28:14

Linux Mint 22 部署 Vosk-API 安装避坑：离线语音识别一次跑通

Linux Mint 22 部署 Vosk-API 安装避坑：离线语音识别一次跑通 【免费下载链接】vosk-api Offline speech recognition API for Android, iOS, Raspberry Pi and servers with Python, Java, C# and Node 项目地址: https://gitcode.com/GitHub_Trending/vo/vosk-a…

作者头像 李华
网站建设 2026/9/11 1:27:43

electerm 完整使用指南：一个终端搞定 SSH、SFTP 与多机切换

electerm 完整使用指南：一个终端搞定 SSH、SFTP 与多机切换 【免费下载链接】electerm 📻Free and open-sourced terminal/ssh/sftp/ftp/telnet/serialport/RDP/VNC/Spice client(Linux, Mac, Windows, Android, HarmonyOS, iOS) 项目地址: https://gi…

作者头像 李华
网站建设 2026/9/11 1:25:48

云服务X1的擎天架构与技术民主化实践

1. 云服务X1的颠覆性定位当大多数云服务商还在比拼资源规模和价格战时，X1选择了一条截然不同的道路——它本质上是一场关于"技术民主化"的运动。我在实际测试中发现，这套基于擎天架构的系统，通过三个维度重构了传统云服务的价值链条…

作者头像 李华
网站建设 2026/9/11 1:25:11

GHelper 完整上手指南：让 ROG 笔记本满血输出的 5 分钟方案

GHelper 完整上手指南：让 ROG 笔记本满血输出的 5 分钟方案 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProArt, Vivobook, Zenboo…

作者头像 李华
网站建设 2026/9/11 1:24:07

Soybean Admin 使用指南：一套 Vue3 后台管理模板能帮你省掉哪些活

Soybean Admin 使用指南：一套 Vue3 后台管理模板能帮你省掉哪些活 【免费下载链接】soybean-admin A clean, elegant, beautiful and powerful admin template, based on Vue3, Vite7, TypeScript, Pinia, NaiveUI and UnoCSS. 一个清新优雅、高颜值且功能强大的后台…

作者头像 李华