3 步跑通第一个地下 3D 地球：Cesium 地下空间可视化实践指南-北京尧图网络

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），仅供参考

3 步跑通第一个地下 3D 地球：Cesium 地下空间可视化实践指南

相关推荐

低功耗开发全景拆解：安卓与嵌入式功耗优化及入行指南

猫抓：一次嗅探下载网页视频的完整指南

Resume Matcher API 请求/响应流程全解析：从简历上传、AI 润色到求职追踪的端点调用链

更多资讯

CPython 3.6.0a1 变更全解析：从 PEP 498 字符串插值到内存分配器调试体系

RabbitMQ高可用镜像队列实战：从集群搭建到生产故障恢复指南

STM32F103 AB分区OTA从零复现：Bootloader设计与固件升级实战

GPT-4o提示词工程实战：重构AI技能认知与工业级落地框架

从200mA到3uA：MCU低功耗系统的工程优化实战

res-downloader完整指南：从代理抓取到批量下载视频号、抖音、m3u8资源

今日更新

Linux 内核 ARM 虚拟内存布局全解析：从 4GB 地址空间划分到源码级验证

AIGC降重工具测评与教育应用指南

数据容灾核心指标与实战方案解析

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？