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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Cesium 地下可视化：5 步在网页里切开一座城市
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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考