企业官网建设流程全解析

Cesium 地下可视化：5 步在网页里切开一座城市

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

想象这样一个画面：把城市的地面剖开，地表层在你指令下逐渐透明，地下管线、地铁隧道、几层地质结构依次露出来。这不是离线渲染的特效，而是实时 WebGL 画面——Cesium 地下可视化干的就是这件事。Cesium 是一个开源的 JavaScript 三维地球库，以 WGS84 椭球体作为坐标基础，配合 3D Tiles 的分块流式加载，让地表之下的空间与地表共用同一套坐标系直接渲染在浏览器里。

把一个"实心"的地球变成可以"切开"的场景，难点并不高：地表要能透明、相机要能穿到地下、数据要别把帧率拖死。下面按"五分钟跑通 → 观感参数 → 大数据处理"的顺序把这三件事讲完。

它能做什么

一句话定位：Cesium 是面向真实比例的 WebGL 三维地球/地图可视化库，坐标系落在 WGS84 椭球上，从海平面一直到地心都在同一个坐标系统里可表达；海量地下模型交给 3D Tiles 分块加载，浏览器不用一次性吃下全部几何。

它能接的地下场景，常见的有四类：

• 地质研究：把地球按同心层剖开，用地核、地幔、地壳的椭球分层表达结构。
• 城市规划：把管线网络、地铁线路埋进地下场景，直观核对线与体的相对位置。
• 资源勘探：把矿产体的三维分布叠加在真实地形高程上复核。
• 灾害模拟：在地层内部展示地震波与地下水流的运动路径。

🌍 5 分钟跑通一个地下视图

第 1 步：拉代码起服务。

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

第 2 步：初始化 Viewer，做两件事。关闭相机碰撞检测（否则相机过不了地表），打开透明开关并把正面不透明度调到 0.25：

// 关掉碰撞检测，让相机可以穿过地表 scene.screenSpaceCameraController.enableCollisionDetection = false; // 启用透明化，降低正面不透明度 globe.translucency.enabled = true; globe.translucency.frontFaceAlpha = 0.25;

第 3 步：想只透一块区域就用掩码。设置globe.translucency.rectangle = Cesium.Rectangle.fromDegrees(-120, 0, -30, 45)，只有西经 120°~30°、北纬 0°~45° 的矩形变透明，其余地表原样保留，适合"只开挖关注区域"的演示。

第 4 步：添加地下结构。素材有三类：椭球、盒子这类图元适合快速搭分层原型；glTF/GLB 模型适合精细的地下设施；地形高程数据融合模型则让地层贴着真实地貌走。一个盒子图元放到地球表面的效果大致如此：

第 5 步：试飞一遍。把相机推进透明区域，地表会变成半透明壳，地下结构随之显现。带完整交互（工具栏切层、参数复位）的完整实现，直接读 globe-interior 示例。

决定地下观感的几个参数

参数不多，每个的作用都很直白：

• frontFaceAlpha（正面不透明度）：值越小地表越"消失"，0 为全透明；透明度滑块绑定的就是它。
• rectangle（区域掩码）：只把指定经纬度矩形范围变透明，其余区域不受影响。
• undergroundColor（地下颜色）：相机位于地下时按距离混入画面的底色，压得越暗，洞内感越强。
• 雾密度（scene.fog.density）：值越大，纵深消失得越快，用来模拟地下的浑浊空气。
• 雾颜色（scene.fog.color）：决定雾的色调，和密度配合做出"越深越暗"的层次。
• 地面大气与光照（showGroundAtmosphere）：关闭地面大气能去掉地表边缘的青色描边，透明区更干净；光源方向与强度决定地下模型细节是否看得清。

交互控件与一个限深坑

交互控件按三件套配：地下/地表切换按钮（切 translucency.enabled 与碰撞检测开关）、地下层级选择器（globe-interior 示例在工具栏挂了菜单逐层开关）、透明度滑块（绑 frontFaceAlpha）。

一个高频坑：相机进地下后方向感会丢失，还容易越钻越深。加一个帧后钩子限制最大深度即可：

// 限制相机最深下探到 -1000 米 scene.postUpdate.addEventListener(() => { const h = globe.getHeight(camera.positionCartographic); if (h < -1000) camera.positionCartographic.height = -1000; });

⚡ 别让大数据拖垮帧率

大场景掉帧，原因几乎都在数据加载和绘制调用次数上，而不是透明效果本身。三件常规武器：

• 3D Tiles 分块流式加载：地下模型拆成 tileset.json 层级瓦片，引擎按视需求取哪块加载哪块。
• 视锥剔除：只绘制当前视口内的结构，背对相机的地下部分不进入渲染。
• LOD 层级细节：按距离自动降低细节等级，近处保精度、远处出简化版。

若仍掉帧，还有两个更直接的手段：几何实例化——成千上万个相同对象（管节点、桩基之类）合到一次绘制调用里，配合视距剔除把不画的剔除掉。一批重复方块用实例化渲染出来就是下面这种效果：

数据格式这边，三类常用地下数据都有入口：地质分层与时序动态用 CZML 组织；地下建筑模型走 IFC/BIM 体系；地下激光扫描点云可直接以 3D Tiles 点云格式查看。

继续深挖的入口

跑通流程之后，仓库里这几个入口值得收藏：

• 官方文档：Documentation/，从贡献者指南可以查到完整的参数说明。
• 地表透明化示例：globe-translucency，最简透明化配置，含掩码与矩形两种写法。
• 地球内部示例：globe-interior，带层级切换交互与参数复位逻辑。
• Globe API 源码：Globe.js，想弄清 translucency 和 undergroundColor 的实现，直接读源码。

透明化参数和相机限深是这套技术的两个核心，吃透这两处，剩下的只是换数据和调颜色。

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