3 步跑通第一个地下 3D 地球Cesium 地下空间可视化实践指南【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesiumCesium 是一个用 WebGL 在浏览器里直接渲染世界级 3D 地球的开源 JavaScript 库本文以透视地球为主线讲 Cesium 地下空间可视化3 步跑通第一个 3D 地球再用两个透明化参数把地幔、地铁、矿井这类地下结构显示出来。3 步跑通第一个 3D 地球不用写代码先看到效果3 条命令就能在浏览器里得到一个可旋转的 3D 地球。第一步克隆仓库并装依赖git clone https://gitcode.com/GitHub_Trending/ce/cesium cd cesium npm install npm start第二步npm start会在终端打印本地地址默认 http://localhost:8085用浏览器打开。第三步仓库里的 Apps/HelloWorld.html 就是最小示例核心就一行new Cesium.Viewer(cesiumContainer)一个空div会变成可缩放、可旋转的 3D 地球鼠标拖拽即可操作。想直接体验地下主题就在终端地址后加/Sandcastle/index.html进入示例库搜Globe Interior源码在 packages/sandcastle/gallery/globe-interior/。效果地球内部出现一个黄色内核点顶部菜单还能切换橙色外核与红色地幔层。看懂透视的两个参数frontFaceAlpha 与 rectangle先理解两个机制所有地下效果都由它们派生。第一个是分块瓦片加载地球表面不是一张图而是按经纬度切成的海量瓦片每块瓦片按与相机的距离加载不同细节LOD所以从全球视角缩放到单体建筑都不卡。第二个是正面透明每块瓦片有个正面globe.translucency.frontFaceAlpha控制它的透明度1.0 不透明0.0 全透视globe.translucency.rectangle再把透视范围限定在一个经纬度矩形里只对你关心的区域开窗。这两个属性的实现在 packages/engine/Source/Scene/Globe.js。地表透明后里面看到的是你放的内容几何体、glTF 模型或像仓库 globe-translucency 示例那样把一座真实矿井的 glb 模型挂在英国废弃矿山的经纬度上配合半透明地表形成地下剖面。为什么地下场景常用 Cesium 而不是普通 3D 引擎因为它基于真实 WGS84 坐标系数据天然绑定经纬度和海拔且支持 3D Tiles 流式加载海量数据应用场景典型用途地质研究地壳、地幔、地核分层结构展示城市规划地下管线、地铁线路三维管理资源勘探矿产分布、矿井立体视图灾害模拟断层、流体运动可视化把效果做深性能优化与数据接入性能方向不是渲染更多而是只渲染视口需要的。3D Tiles 会把模型切成瓦片层级引擎只加载当前视野和距离需要的细节级别关键参数是scene.globe.maximumScreenSpaceError默认 16数值越大保留的细节越多、帧率代价越高。二次访问还会命中浏览器磁盘缓存3D Tiles 资源大多直接读本地磁盘加载耗时从秒级降到毫秒级数据接入方向三类数据各有入口。卫星影像WMTS/WMS、矢量数据GeoJSON、CZML、KML和三维模型glTF、3D Tiles。地下设施导出成 glTF 后按经纬度挂载即可关键参数就是model.uri和positionviewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-3.8, 53.1, 72), model: { uri: path/to/mine-model.glb }, });Globe Interior 示例的开窗写法可以直接抄它只对一个矩形区域做半透明而不是整颗地球globe.translucency.enabled true; globe.translucency.frontFaceAlpha 0.25; globe.translucency.rectangle Cesium.Rectangle.fromDegrees(-120, 0, -30, 45); globe.undergroundColor Cesium.Color.LIGHTSLATEGRAY;踩坑指南3 个高频问题一句话解决Q打开页面弹出Cesium ion access token required黑字原因默认示例使用 Cesium ion 卫星影像而示例仓库不预置密钥。解法Cesium.Ion.defaultAccessToken 你的token配上自己的或在示例里切到可离线使用的 Natural Earth 影像。Q相机进不了地面总是被弹回地表原因屏幕相机控制器的碰撞检测把地形表面当障碍。解法一行scene.screenSpaceCameraController.enableCollisionDetection false;即可让相机穿越地表。Q地表透明后里面一片漆黑看不见地下模型原因地下背景色globe.undergroundColor默认纯黑且地球内部没有光源。解法给undergroundColor设置非黑颜色并用undergroundColorAlphaByDistance控制按距离的淡入。总结与下一步Cesium 让浏览器直接承载一个真实坐标系的 3D 地球地下可视化本质是三件事让相机进得去、让地表透得开、让内容挂得准。先跑通 Globe Interior 示例再逐个改参数比先通读文档更快。官方文档Documentation/示例packages/sandcastle/gallery/globe-interior/源码packages/engine/Source/Scene/Globe.js下一步打开 Sandcastle 跑一遍 Globe Interior把三层椭球半径改成你自己的地质分层数据把 translucency rectangle 抄进自己的项目把四个边界值改成你的关注区域将地下设施模型导出为 glTF用entities.add挂载到地球并配合矩形透明区域展示【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考