CesiumJS地下空间可视化30分钟看穿地球的实操路径【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesiumCesiumJS 是一款开源的 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.jsAPI 实现Globe.jstranslucency、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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考