怎么在浏览器里看到地下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加frontFaceAlpha0~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/下一步你可以直接动手打开 globe-interior 示例在工具栏切换 Translucency mask 和 Translucency rectangle对比两种透明化方式的差异把frontFaceAlpha从 0.25 一路调到 0.05感受透明度对地下模型可读性的影响换成你自己的管线或隧道 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），仅供参考