手把手指南如何用 Cesium 做 WebGL 三维地下空间可视化【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesiumCesium 是一个开源 JavaScript 三维地球库基于 WGS84 椭球体构建坐标系统从地表一直延伸到地心。这篇文章带你完成一套完整的地下可视化流程把地表调透明、把模型埋进地下、让相机钻进去最后把画面调到又顺又深。效果先行先看清目标画面做完之后你应该看到相机停在地心附近半透明的地球表面笼罩在外面内部是三层同心球体——黄色内核、橙色外核、红色地幔右上角工具栏可以在内核 / 外核 / 地幔 / 全部隐藏之间切换。要实现这个画面只需要四步本地跑起 Cesium 开发服务打开地表透明化两种做法按需求选用图元或模型文件搭建地下结构放行相机进入地下并用雾效、背景色补出深度感。开发环境三步跑起来git clone https://gitcode.com/GitHub_Trending/ce/cesium cd cesium npm install npm startnpm start会启动本地服务等价于执行node server.js随后在浏览器里打开 Sandcastle 页面即可加载仓库自带的示例。让地表变透明两种透明化做法全局透明度frontFaceAlpha 一个参数搞定const globe viewer.scene.globe; globe.translucency.enabled true; // 透明化总开关默认关闭 globe.translucency.frontFaceAlpha 0.25; // 取值 0~1越小越透为什么建议用 0.25 而不是 0frontFaceAlpha是在地表材质、影像混合之后乘上去的一个系数即使给个小值地表轮廓依然隐约可见相机进入地下后仍能用它判断方位直接置 0 会让整个参照系消失。区域透明translucency.rectangle 限定范围如果只想让某一块地表开窗比如展示某个城市的地下管网把透明限制在矩形内globe.translucency.rectangle Cesium.Rectangle.fromDegrees( -120.0, 0.0, -30.0, 45.0 // 参数顺序西经、南纬、东经、北纬 );这样矩形外的地表保持完全不透明视觉干扰最小。把rectangle设回undefined则恢复为整球生效。避坑两个必须一起改的开关️ 只开enabled而漏掉下面两项画面基本看不出变化关地面大气globe.showGroundAtmosphere false否则地平线处的天光散射会盖住地下视角的边缘地表基础色改透明globe.baseColor Cesium.Color.TRANSPARENT。基础色不透明时前面算好的透明度会被它垫底frontFaceAlpha形同虚设。把模型埋进地下三种建模方式图元路线椭球体表示分层地质分层最快的方式就是用同心椭球体。以内核为例position放在地心radii给半径单位米const innerCore viewer.entities.add({ name: Inner Core, position: Cesium.Cartesian3.ZERO, // 放在地心 ellipsoid: { radii: new Cesium.Cartesian3(1250000, 1250000, 1250000), // 半径 1250 千米 material: Cesium.Color.YELLOW } });为什么位置必须是Cartesian3.ZERO地核、地幔这类结构都是以椭球中心为同心圆的模型原点落在地心后半径就直接等价于深度调数字就能分层。仓库示例里三层半径分别取 1250000 / 3450000 / 6300000 米。模型路线加载 glTF/GLB精细设施管道、车站、管廊直接用model实体加载二进制 glTFviewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.39, 39.9), // 经纬度定位 model: { uri: path/to/underground.glb } });需要真正沉入地下时给定位点一个负的高程fromDegrees的第三个参数模型就会没入地表以下——前提是地表已按上一节调成透明。融合路线地形数据与 3D Tiles真实地质剖面建议结合地形高程数据生成截面或者干脆把整个地下工程切块打成 3D Tiles 瓦片集按视距流式加载。这条路线数据量最大也是下一节性能优化的主战场。让相机钻进去地下漫游的三个必改设置关闭碰撞检测相机才能入地默认情况下相机会被地表、地形挡在外面这是最常见的卡点viewer.scene.screenSpaceCameraController.enableCollisionDetection false;雾效与地下背景色把深度感调出来viewer.scene.fog.density 0.0002; // 雾密度默认 0.0006越小雾越薄 viewer.scene.fog.color Cesium.Color.DARKSLATEGRAY; globe.undergroundColor Cesium.Color.BLACK; // 地球内部背景色为什么要加雾地下没有地面作参照景深全靠距离衰减来暗示雾能帮远处的地层自然淡出。undergroundColor只在相机位于地球内部时生效不影响地表视图不想要这层颜色时把它设为undefined即可。光照方面调整场景光源方向与强度可以让地下结构产生明暗对比细节更立得住。避坑给相机设一个最大深度 痛点关掉碰撞后相机很容易坠得太深视角失控、找不回来。解决办法是在每帧渲染回调里钳制高度viewer.scene.postUpdate.addEventListener(() { const carto viewer.camera.positionCartographic; if (carto.height -1000) { // 限制最深处为地下 1000 米 carto.height -1000; } });跑得更快、看着更深性能与数据接入Cesium 性能优化三招分块加载把大体量地下模型切成 3D Tiles瓦片按需流式加载而不是启动时一次读入视锥剔除引擎默认只绘制视锥内的瓦片scene.fog.density调大后完全被雾覆盖的地形也会被剔除进一步减少绘制LOD按相机距离切换模型细节等级远看低模、近看高模。避坑复杂模型掉帧怎么办典型症状是模型一多帧率骤降两个方向解几何实例化管道、立柱这类重复结构共享同一份网格只变换位置视距剔除 批处理合并小模型、减少 draw call远距离批次整体跳过。数据接入CZML、BIM、点云数据类型接入方式时序地质分层数据CZML用CzmlDataSource加载可按时间轴播放IFC / BIM 地下建筑先转换为 glTF 或 3D Tiles 再加载地下扫描点云点云 3D Tilespnts 瓦片支持体渲染着色下一步行动 按顺序做这四件事基本就能独立搭出第一个地下场景克隆仓库并npm start先打开仓库自带的 Globe Interior 示例看完整效果再回头读代码把frontFaceAlpha从 0.25 改到 0.5、0.05对比三档透明度对定位感的差异修改三个椭球的radii与颜色换成你自己的地下分层数据加上深度限制监听测试相机坠落被钳制后的漫游手感。资源直达Cesium 官方文档入口Sandcastle 示例总目录含 globe-interior、globe-translucencyGlobe API 源码translucency、undergroundColor 定义处【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考