如何把相机钻到地球内部Cesium 地下空间可视化完整指南【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium读完这篇教程你能用 Cesium 搭出一个可以钻进地下的三维场景地表变透明、矿山模型悬在地下几百米、相机能贴着岩层穿行。Cesium 地下空间可视化的核心就三件事地表透明化translucency、地下背景色undergroundColor、关闭相机碰撞检测。下面按先看效果 → 懂机制 → 接数据 → 调手感 → 排坑的顺序讲。先看效果一个能运行的最小 Demo不绕弯子直接说最终画面长什么样相机从地表往下俯冲地表贴图逐渐变得半透明一座地下矿山 glTF 模型出现在你脚下周围是深色渐变的地下空间。这就是仓库里现成的 Sandcastle 示例globe-translucency的效果。把仓库拉到本地后跑起来git clone https://gitcode.com/GitHub_Trending/ce/cesium cd cesium npm install npm start打开 Sandcastle在 globe-interior 示例里点 Translucency rectangle北美西岸的地表立刻变得半透明地下露出了一个黄色椭球模拟地核。三个必须理解的机制搞懂这三条后面所有代码都是它们的组合。1. 地表透明化不是贴图变淡而是双通道叠加。globe.translucency.enabled true打开后Cesium 用frontFaceAlpha0~1越小越透决定地面前侧面的透明度。它还支持按距离淡出frontFaceAlphaByDistance是一个NearFarScalar比如new Cesium.NearFarScalar(400.0, 0.0, 800.0, 1.0)表示相机距地表 400 米内完全透明、800 米外恢复正常这正是越下钻越透明的观感来源。2. 地下背景色靠距离渐变打底。相机低于地表后背后那片虚空由globe.undergroundColor控制undergroundColorAlphaByDistance同样是 NearFarScalar让颜色随下钻距离从透明渐浓到不透明形成自然的岩壁深处变黑效果。3. 默认相机是怕碰地的必须先解禁。scene.screenSpaceCameraController.enableCollisionDetection false一行不开相机根本进不了地下所有地下内容都白搭。把地下装进地球数据与模型接入机制懂了往里填东西。三条接入路径按常用程度排glTF/GLB 模型用viewer.entities.add({ model: { uri: ... } })挂一个模型把它的经纬度高程写成负数如height: -500.0就是地下。示例用的就是 ParcLeadMine 铅矿模型。地形融合地下内容要嵌进地形里需要真实地形打底terrain: Cesium.Terrain.fromWorldTerrain()开启世界地形后模型的相对高低才有意义矢量数据多边形、折线配合classificationType: Cesium.ClassificationType.TERRAIN可以贴在地表/地形上。点云与分块数据大规模地下扫描数据走 3D Tiles 流式加载点云示例数据可直接验证分块效果。顺序建议先放模型看位置再接地形最后做透明化——否则你连模型没显示还是地表挡住了都分不清。从能用到好用交互、性能与视觉一锅端交互层在工具栏加一组切换项比写死状态实用得多scene.screenSpaceCameraController.enableCollisionDetection false; globe.translucency.enabled true; globe.translucency.frontFaceAlpha 0.25;配合Sandcastle.addToolbarMenu挂内核 / 外核 / 地幔 / 关闭几个开关用户就能像切图层一样切地下结构。想限制下潜深度就在scene.postUpdate里读camera.positionCartographic.height低于 -1000 米就钳回去。视觉层雾能立刻提升空间深度感scene.fog.density 0.0002配scene.fog.color Cesium.Color.BLACK地下越深雾越浓。注意透明化与混合排序的兼容性初始化 Viewer 时设orderIndependentTranslucency: false透明地表叠地下模型才不会出现奇怪的排序条纹。性能层大面积透明化 高密度瓦片是帧率杀手。优先用瓦片流式加载而不是整包塞入打开磁盘缓存Cesium 内置 cache 会把瓦片请求命中到本地Network 面板里应能看到大量 (disk cache)并用scene.fps/ 性能测试指南里的方法盯帧率。踩坑与排错清单现象相机进不了地下贴地就卡住→ 排查是否漏了那行开关 → 解法enableCollisionDetection false这步 90% 的人第一次都忘。现象地表透明了地下模型看不见→ 排查模型高程是否足够负、是否被undergroundColor的浓色盖住 → 解法把undergroundColorAlphaByDistance.nearValue从 0.0 调大些或先用DebugModelMatrixPrimitive画一条参考轴确认模型矩阵现象透明区域边缘闪烁或透明失效→ 排查是否用了orderIndependentTranslucency默认值 → 解法初始化时显式设为false只透明局部区域时改用translucency.rectangle Cesium.Rectangle.fromDegrees(...)限定范围代价更小。现象下钻后画面发灰、没深度感→ 排查雾和地下色是否配置 → 解法scene.fog.density 0.0002起步微调同时调浓farValue到 1.0。继续往下走示例索引globe-interior地表透明 内部结构、globe-translucency地下矿山 距离透明、underground-color地下背景色渐变源码入口Globe.jstranslucency 与 undergroundColor 两个属性的实现都在里面延伸三个方向把地下矿山换成城市地下管线用折线 点做分层管廊用 terrain-clipping-planes 示例切出剖面直接看到地表以下的地层或者结合 3D Tiles 的元数据做地下空间的按特征筛选与拾取。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/11 14:23:54 · 阅读 1.2k 如何把相机钻到地球内部：Cesium 地下空间可视化完整指南
如何把相机钻到地球内部Cesium 地下空间可视化完整指南【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium读完这篇教程你能用 Cesium 搭出一个可以钻进地下的三维场景地表变透明、矿山模型悬在地下几百米、相机能贴着岩层穿行。Cesium 地下空间可视化的核心就三件事地表透明化translucency、地下背景色undergroundColor、关闭相机碰撞检测。下面按先看效果 → 懂机制 → 接数据 → 调手感 → 排坑的顺序讲。先看效果一个能运行的最小 Demo不绕弯子直接说最终画面长什么样相机从地表往下俯冲地表贴图逐渐变得半透明一座地下矿山 glTF 模型出现在你脚下周围是深色渐变的地下空间。这就是仓库里现成的 Sandcastle 示例globe-translucency的效果。把仓库拉到本地后跑起来git clone https://gitcode.com/GitHub_Trending/ce/cesium cd cesium npm install npm start打开 Sandcastle在 globe-interior 示例里点 Translucency rectangle北美西岸的地表立刻变得半透明地下露出了一个黄色椭球模拟地核。三个必须理解的机制搞懂这三条后面所有代码都是它们的组合。1. 地表透明化不是贴图变淡而是双通道叠加。globe.translucency.enabled true打开后Cesium 用frontFaceAlpha0~1越小越透决定地面前侧面的透明度。它还支持按距离淡出frontFaceAlphaByDistance是一个NearFarScalar比如new Cesium.NearFarScalar(400.0, 0.0, 800.0, 1.0)表示相机距地表 400 米内完全透明、800 米外恢复正常这正是越下钻越透明的观感来源。2. 地下背景色靠距离渐变打底。相机低于地表后背后那片虚空由globe.undergroundColor控制undergroundColorAlphaByDistance同样是 NearFarScalar让颜色随下钻距离从透明渐浓到不透明形成自然的岩壁深处变黑效果。3. 默认相机是怕碰地的必须先解禁。scene.screenSpaceCameraController.enableCollisionDetection false一行不开相机根本进不了地下所有地下内容都白搭。把地下装进地球数据与模型接入机制懂了往里填东西。三条接入路径按常用程度排glTF/GLB 模型用viewer.entities.add({ model: { uri: ... } })挂一个模型把它的经纬度高程写成负数如height: -500.0就是地下。示例用的就是 ParcLeadMine 铅矿模型。地形融合地下内容要嵌进地形里需要真实地形打底terrain: Cesium.Terrain.fromWorldTerrain()开启世界地形后模型的相对高低才有意义矢量数据多边形、折线配合classificationType: Cesium.ClassificationType.TERRAIN可以贴在地表/地形上。点云与分块数据大规模地下扫描数据走 3D Tiles 流式加载点云示例数据可直接验证分块效果。顺序建议先放模型看位置再接地形最后做透明化——否则你连模型没显示还是地表挡住了都分不清。从能用到好用交互、性能与视觉一锅端交互层在工具栏加一组切换项比写死状态实用得多scene.screenSpaceCameraController.enableCollisionDetection false; globe.translucency.enabled true; globe.translucency.frontFaceAlpha 0.25;配合Sandcastle.addToolbarMenu挂内核 / 外核 / 地幔 / 关闭几个开关用户就能像切图层一样切地下结构。想限制下潜深度就在scene.postUpdate里读camera.positionCartographic.height低于 -1000 米就钳回去。视觉层雾能立刻提升空间深度感scene.fog.density 0.0002配scene.fog.color Cesium.Color.BLACK地下越深雾越浓。注意透明化与混合排序的兼容性初始化 Viewer 时设orderIndependentTranslucency: false透明地表叠地下模型才不会出现奇怪的排序条纹。性能层大面积透明化 高密度瓦片是帧率杀手。优先用瓦片流式加载而不是整包塞入打开磁盘缓存Cesium 内置 cache 会把瓦片请求命中到本地Network 面板里应能看到大量 (disk cache)并用scene.fps/ 性能测试指南里的方法盯帧率。踩坑与排错清单现象相机进不了地下贴地就卡住→ 排查是否漏了那行开关 → 解法enableCollisionDetection false这步 90% 的人第一次都忘。现象地表透明了地下模型看不见→ 排查模型高程是否足够负、是否被undergroundColor的浓色盖住 → 解法把undergroundColorAlphaByDistance.nearValue从 0.0 调大些或先用DebugModelMatrixPrimitive画一条参考轴确认模型矩阵现象透明区域边缘闪烁或透明失效→ 排查是否用了orderIndependentTranslucency默认值 → 解法初始化时显式设为false只透明局部区域时改用translucency.rectangle Cesium.Rectangle.fromDegrees(...)限定范围代价更小。现象下钻后画面发灰、没深度感→ 排查雾和地下色是否配置 → 解法scene.fog.density 0.0002起步微调同时调浓farValue到 1.0。继续往下走示例索引globe-interior地表透明 内部结构、globe-translucency地下矿山 距离透明、underground-color地下背景色渐变源码入口Globe.jstranslucency 与 undergroundColor 两个属性的实现都在里面延伸三个方向把地下矿山换成城市地下管线用折线 点做分层管廊用 terrain-clipping-planes 示例切出剖面直接看到地表以下的地层或者结合 3D Tiles 的元数据做地下空间的按特征筛选与拾取。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考