十分钟看穿地心用 Cesium 搭出地下空间 WebGL 三维可视化【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium上次一个地质工程师的朋友给我看渲染的地核-地幔-地壳分层图我以为是几十万的桌面专业软件出的结果他在浏览器里做的。关键就一行配置把 Cesium 的地表调成半透明地下结构立刻显形。这就是 Cesium 做 WebGL 三维可视化的门槛——不需要换坐标系不需要建模软件你在地表用的地球往地下挖就是同一个地球。这篇文章带你从零跑通一个能钻进地心的场景。地下空间三维可视化到底能解决什么问题地质工程师向客户演示地层结构。客户不想装软件只想点链接就看见内核、外核、地幔。Cesium 基于 WGS84 椭球体地下结构和地表模型共享同一套坐标半径 1250km 的内核球体和地表地形严丝合缝不用做任何坐标转换。城市规划部门管理地下管线。地铁、给排水、电力电缆各自埋在不同深度用实体图元按层表达相机关掉碰撞检测后可以直接钻进地下看某一层的走向比平面图直观得多。数字孪生项目整合上下空间。地上是 BIM 建筑地下是管线和地铁两边数据要在同一个场景里对齐。传统方案要分别出两份效果图Cesium 里它们只是同一个 Scene 的两批对象。Cesium WebGL 三维可视化中的地球对比视图左右两个半球使用不同的显示方向动手之前三步启动 Cesium 开发环境先拿到源码。仓库里自带了完整示例Sandcastle不用自己搭脚手架。git clone https://gitcode.com/GitHub_Trending/ce/cesium cd cesium npm install npm start⚠️ 两个坑先说在前面package.json的 engines 明确要求Node 22.0.0旧版本会在 install 阶段直接报错npm install会触发prepare脚本gulp prepare playwright 安装依赖第一次可能要跑好几分钟属于正常现象别中途 CtrlC。服务起来后浏览器访问本地端口打开 Sandcastle搜 Globe Interior 就能看到本文对应的官方示例——我们接下来就是把它拆开手写一遍。地表透明化原理WebGL 三维可视化如何看穿地表别急先搞清楚它为什么能看穿。Cesium 的地表透明化由globe.translucency这一组属性控制流程可以拆成输入 → 处理 → 输出输入你指定一个rectangle哪些经纬度区域变透明和frontFaceAlpha正面透明度0 全透、1 不透明。处理Globe 的渲染逻辑对指定区域的地形瓦片正面做 alpha 混合同时取消背面剔除back face culling——这意味着相机在地下时你回头看地表朝下的一面也能被画出来而不是黑洞。输出在地表那块区域变成一个透视窗口钻到地下地表和天空反而成了你身后的背景。关键代码如下全部出自官方globe-interior示例const globe viewer.scene.globe; // 开启透明化整个机制的开关 globe.translucency.enabled true; // 正面透明度 0.25越小越透 globe.translucency.frontFaceAlpha 0.25; // 只对美国西海岸这块矩形区域透明 globe.translucency.rectangle Cesium.Rectangle.fromDegrees( -120.0, 0.0, -30.0, 45.0 ); // 关掉地面大气否则地表边缘会糊一层蓝色雾 globe.showGroundAtmosphere false;还有一个隐藏机制值得知道透明化解决的是地球本体而卫星影像层还盖在地表上面。要连影像一起透视得用影像层的colorToAlpha把指定颜色抠掉后面技巧 1 会用到。另外无论上下模型都活在同一套 WGS84 坐标里模型位置不对时官方提供了DebugModelMatrixPrimitive把矩阵轴可视化出来排查DebugModelMatrixPrimitive的 API 文档页用于在 WebGL 三维可视化场景中调试模型坐标轴从零搭一个能跑的例子下面按三步搭一个最小可跑的地下场景代码都可以直接粘贴。步骤 1初始化 Viewer并允许相机进地下。const viewer new Cesium.Viewer(cesiumContainer, { // 关闭顺序无关透明透明化场景下性能更好官方示例的写法 orderIndependentTranslucency: false, }); // 默认碰撞检测会把相机卡在表面先关掉 viewer.scene.screenSpaceCameraController.enableCollisionDetection false;运行后你应该看到正常转动的地球而且滚轮可以把镜头推进地表以下。上一步只是允许下钻画面还是完全不透明。步骤 2 开启透明化让地表真正变成窗口const globe viewer.scene.globe; globe.showGroundAtmosphere false; // 去掉蓝色大气雾 globe.baseColor Cesium.Color.TRANSPARENT; // 地表基底色改透明 globe.translucency.enabled true; globe.undergroundColor undefined; // 关闭地下黑色涂装运行后你应该看到地球整体发透大气层消失镜头下钻时地表背后是空背景。步骤 3往地心里塞三层椭球。内核对半径 1250km外核 3450km地幔 6300km三个椭球共用地心作为中心const layer (name, r, color) viewer.entities.add({ name, position: Cesium.Cartesian3.ZERO, // 三个球都位于地心 ellipsoid: { radii: new Cesium.Cartesian3(r, r, r), material: color, }, }); // 依次创建内核、外核、地幔 const innerCore layer(Inner Core, 1250000, Cesium.Color.YELLOW); const outerCore layer(Outer Core, 3450000, Cesium.Color.ORANGE); const mantle layer(Mantle, 6300000, Cesium.Color.RED); outerCore.show mantle.show false; // 一次只显示一层避免嵌套遮挡运行后你应该能把相机推到地心附近看到悬浮在透明地球里的黄色内核。把show切换一下就能逐层剥开地球。让它更好看、更快两个进阶技巧技巧 1只抠掉海洋保留陆地。问题整球透明看起来发虚看不清地下数据和海岸线的关系。解决用影像层的colorToAlpha把底图上的深蓝色海洋变成 alpha陆地原样保留const baseLayer viewer.scene.imageryLayers.get(0); // 把底图海洋的深蓝色Bing 海洋色映射为透明 baseLayer.colorToAlpha new Cesium.Color(0.0, 0.016, 0.059); // 颜色越接近目标色alpha 越低 baseLayer.colorToAlphaThreshold 0.2;效果海洋消失、陆地保留地下结构正好浮在大陆轮廓上汇报时视觉冲击力比全透明强得多。技巧 2按距离退避透明压住填充率开销。问题相机绕着地球转时透明区域大帧率明显掉。解决用frontFaceAlphaByDistance让远处的地表恢复不透明只有镜头附近保持半透// 150km 内透明度 0.58000km 外回到 1.0完全不透明 globe.translucency.frontFaceAlphaByDistance new Cesium.NearFarScalar(1.5e2, 0.5, 8.0e6, 1.0);效果远处瓦片按不透明走快速路径只有近景参与透明混合绕圈时帧率能稳住。性能面板中的 disk cache 命中3D Tiles 数据二次加载只需 2~4ms配合这一点大量加载 3D Tiles 或点云时浏览器磁盘缓存会自动生效二次漫游基本是毫秒级命中这也是为什么先粗模占位、按需拉高模的流式加载策略在 Cesium 里几乎零成本。踩坑记录三个高频翻车点症状开了translucency.enabled true地球却一点没变。我当时也栽在这后来发现是地面大气还在——那层蓝色雾把地表糊住了alpha 改了也白改。修复只要一行globe.showGroundAtmosphere false;症状透明区域在快速旋转时出现闪烁和色带。原因是orderIndependentTranslucency: true会让所有透明对象走一遍排序合成透明化场景下开销翻倍。创建 Viewer 时改成orderIndependentTranslucency: false即可官方示例正是这么写的。症状钻到地下后回头看地表是一片纯黑。默认undergroundColor是黑色相机在地下时它会把朝下的地表涂上这个颜色。把globe.undergroundColor undefined设回去地表就恢复成正常的影像颜色了。收尾与延伸当三维可视化从桌面端搬进浏览器Cesium 踩在了一个很关键的位置上它让你不需要学习另一套坐标体系地下的内核和外层的地表模型共用同一套 WGS84 空间。透明化、碰撞检测开关、按距离退避——这些 API 的设计意图都很明确先让看得进去再让看得舒服。下一步可以做三件事把frontFaceAlpha从 0.25 调到 0.6对比两种透明度下的填充率和帧率差异找到汇报演示的甜点位。用colorToAlpha抠掉海洋后往地下加一条地铁线PolylineGraphicsheightReference设为BELOW_GROUND看它和海岸线的贴合度。打开frontFaceAlphaByDistance用viewer.scene.requestRenderMode true再压一次内存占用。关键资源官方示例源码Globe Interior透明化属性实现GlobeTranslucency.jsGlobe 全部属性 APIGlobe.js地表之上是别人的战场地表之下现在轮到你了。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 十分钟看穿地心：用 Cesium 搭出地下空间 WebGL 三维可视化
十分钟看穿地心用 Cesium 搭出地下空间 WebGL 三维可视化【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium上次一个地质工程师的朋友给我看渲染的地核-地幔-地壳分层图我以为是几十万的桌面专业软件出的结果他在浏览器里做的。关键就一行配置把 Cesium 的地表调成半透明地下结构立刻显形。这就是 Cesium 做 WebGL 三维可视化的门槛——不需要换坐标系不需要建模软件你在地表用的地球往地下挖就是同一个地球。这篇文章带你从零跑通一个能钻进地心的场景。地下空间三维可视化到底能解决什么问题地质工程师向客户演示地层结构。客户不想装软件只想点链接就看见内核、外核、地幔。Cesium 基于 WGS84 椭球体地下结构和地表模型共享同一套坐标半径 1250km 的内核球体和地表地形严丝合缝不用做任何坐标转换。城市规划部门管理地下管线。地铁、给排水、电力电缆各自埋在不同深度用实体图元按层表达相机关掉碰撞检测后可以直接钻进地下看某一层的走向比平面图直观得多。数字孪生项目整合上下空间。地上是 BIM 建筑地下是管线和地铁两边数据要在同一个场景里对齐。传统方案要分别出两份效果图Cesium 里它们只是同一个 Scene 的两批对象。Cesium WebGL 三维可视化中的地球对比视图左右两个半球使用不同的显示方向动手之前三步启动 Cesium 开发环境先拿到源码。仓库里自带了完整示例Sandcastle不用自己搭脚手架。git clone https://gitcode.com/GitHub_Trending/ce/cesium cd cesium npm install npm start⚠️ 两个坑先说在前面package.json的 engines 明确要求Node 22.0.0旧版本会在 install 阶段直接报错npm install会触发prepare脚本gulp prepare playwright 安装依赖第一次可能要跑好几分钟属于正常现象别中途 CtrlC。服务起来后浏览器访问本地端口打开 Sandcastle搜 Globe Interior 就能看到本文对应的官方示例——我们接下来就是把它拆开手写一遍。地表透明化原理WebGL 三维可视化如何看穿地表别急先搞清楚它为什么能看穿。Cesium 的地表透明化由globe.translucency这一组属性控制流程可以拆成输入 → 处理 → 输出输入你指定一个rectangle哪些经纬度区域变透明和frontFaceAlpha正面透明度0 全透、1 不透明。处理Globe 的渲染逻辑对指定区域的地形瓦片正面做 alpha 混合同时取消背面剔除back face culling——这意味着相机在地下时你回头看地表朝下的一面也能被画出来而不是黑洞。输出在地表那块区域变成一个透视窗口钻到地下地表和天空反而成了你身后的背景。关键代码如下全部出自官方globe-interior示例const globe viewer.scene.globe; // 开启透明化整个机制的开关 globe.translucency.enabled true; // 正面透明度 0.25越小越透 globe.translucency.frontFaceAlpha 0.25; // 只对美国西海岸这块矩形区域透明 globe.translucency.rectangle Cesium.Rectangle.fromDegrees( -120.0, 0.0, -30.0, 45.0 ); // 关掉地面大气否则地表边缘会糊一层蓝色雾 globe.showGroundAtmosphere false;还有一个隐藏机制值得知道透明化解决的是地球本体而卫星影像层还盖在地表上面。要连影像一起透视得用影像层的colorToAlpha把指定颜色抠掉后面技巧 1 会用到。另外无论上下模型都活在同一套 WGS84 坐标里模型位置不对时官方提供了DebugModelMatrixPrimitive把矩阵轴可视化出来排查DebugModelMatrixPrimitive的 API 文档页用于在 WebGL 三维可视化场景中调试模型坐标轴从零搭一个能跑的例子下面按三步搭一个最小可跑的地下场景代码都可以直接粘贴。步骤 1初始化 Viewer并允许相机进地下。const viewer new Cesium.Viewer(cesiumContainer, { // 关闭顺序无关透明透明化场景下性能更好官方示例的写法 orderIndependentTranslucency: false, }); // 默认碰撞检测会把相机卡在表面先关掉 viewer.scene.screenSpaceCameraController.enableCollisionDetection false;运行后你应该看到正常转动的地球而且滚轮可以把镜头推进地表以下。上一步只是允许下钻画面还是完全不透明。步骤 2 开启透明化让地表真正变成窗口const globe viewer.scene.globe; globe.showGroundAtmosphere false; // 去掉蓝色大气雾 globe.baseColor Cesium.Color.TRANSPARENT; // 地表基底色改透明 globe.translucency.enabled true; globe.undergroundColor undefined; // 关闭地下黑色涂装运行后你应该看到地球整体发透大气层消失镜头下钻时地表背后是空背景。步骤 3往地心里塞三层椭球。内核对半径 1250km外核 3450km地幔 6300km三个椭球共用地心作为中心const layer (name, r, color) viewer.entities.add({ name, position: Cesium.Cartesian3.ZERO, // 三个球都位于地心 ellipsoid: { radii: new Cesium.Cartesian3(r, r, r), material: color, }, }); // 依次创建内核、外核、地幔 const innerCore layer(Inner Core, 1250000, Cesium.Color.YELLOW); const outerCore layer(Outer Core, 3450000, Cesium.Color.ORANGE); const mantle layer(Mantle, 6300000, Cesium.Color.RED); outerCore.show mantle.show false; // 一次只显示一层避免嵌套遮挡运行后你应该能把相机推到地心附近看到悬浮在透明地球里的黄色内核。把show切换一下就能逐层剥开地球。让它更好看、更快两个进阶技巧技巧 1只抠掉海洋保留陆地。问题整球透明看起来发虚看不清地下数据和海岸线的关系。解决用影像层的colorToAlpha把底图上的深蓝色海洋变成 alpha陆地原样保留const baseLayer viewer.scene.imageryLayers.get(0); // 把底图海洋的深蓝色Bing 海洋色映射为透明 baseLayer.colorToAlpha new Cesium.Color(0.0, 0.016, 0.059); // 颜色越接近目标色alpha 越低 baseLayer.colorToAlphaThreshold 0.2;效果海洋消失、陆地保留地下结构正好浮在大陆轮廓上汇报时视觉冲击力比全透明强得多。技巧 2按距离退避透明压住填充率开销。问题相机绕着地球转时透明区域大帧率明显掉。解决用frontFaceAlphaByDistance让远处的地表恢复不透明只有镜头附近保持半透// 150km 内透明度 0.58000km 外回到 1.0完全不透明 globe.translucency.frontFaceAlphaByDistance new Cesium.NearFarScalar(1.5e2, 0.5, 8.0e6, 1.0);效果远处瓦片按不透明走快速路径只有近景参与透明混合绕圈时帧率能稳住。性能面板中的 disk cache 命中3D Tiles 数据二次加载只需 2~4ms配合这一点大量加载 3D Tiles 或点云时浏览器磁盘缓存会自动生效二次漫游基本是毫秒级命中这也是为什么先粗模占位、按需拉高模的流式加载策略在 Cesium 里几乎零成本。踩坑记录三个高频翻车点症状开了translucency.enabled true地球却一点没变。我当时也栽在这后来发现是地面大气还在——那层蓝色雾把地表糊住了alpha 改了也白改。修复只要一行globe.showGroundAtmosphere false;症状透明区域在快速旋转时出现闪烁和色带。原因是orderIndependentTranslucency: true会让所有透明对象走一遍排序合成透明化场景下开销翻倍。创建 Viewer 时改成orderIndependentTranslucency: false即可官方示例正是这么写的。症状钻到地下后回头看地表是一片纯黑。默认undergroundColor是黑色相机在地下时它会把朝下的地表涂上这个颜色。把globe.undergroundColor undefined设回去地表就恢复成正常的影像颜色了。收尾与延伸当三维可视化从桌面端搬进浏览器Cesium 踩在了一个很关键的位置上它让你不需要学习另一套坐标体系地下的内核和外层的地表模型共用同一套 WGS84 空间。透明化、碰撞检测开关、按距离退避——这些 API 的设计意图都很明确先让看得进去再让看得舒服。下一步可以做三件事把frontFaceAlpha从 0.25 调到 0.6对比两种透明度下的填充率和帧率差异找到汇报演示的甜点位。用colorToAlpha抠掉海洋后往地下加一条地铁线PolylineGraphicsheightReference设为BELOW_GROUND看它和海岸线的贴合度。打开frontFaceAlphaByDistance用viewer.scene.requestRenderMode true再压一次内存占用。关键资源官方示例源码Globe Interior透明化属性实现GlobeTranslucency.jsGlobe 全部属性 APIGlobe.js地表之上是别人的战场地表之下现在轮到你了。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考