3行代码透视地球内部Cesium WebGL地下空间可视化实战笔记【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium管线一断你要的第一张图往往是三维剖面可二维地图根本画不出地下世界。剖面图纸是死的模型文件又大业务方看着都不直观。其实在Cesium三维地下空间可视化里这件事是「翻开关」级别的把地表调成透明的让相机钻下去地下模型摆上几行代码就能给地球拍一张「X光片」。这篇文章先讲清原理再跑通一个最小「透视地球」demo最后分享三个我踩过的坑。把地表调成玻璃透视的本质透视地下本质是三件小事配合完成。一是让地表变玻璃——影像和地形还在那里只是不再挡视线二是让相机能穿过地面默认它是进不了地下的三是真往地下摆点东西不然看穿了也没东西可看。三样缺一不可只开透明相机照样停在表面能进地下却没模型看到的就是一个黑窟窿。上图来自官方分屏示例一条线把地球劈成两半左右可以各显示一种状态「透」与「不透」的对比一眼可见调参数时把前后效果并排对照很方便。要翻哪些开关globe.translucency 与相机碰撞检测这些开关集中在 globe 和相机控制器上每翻一个效果各不相同。globe.translucency.enabled是总闸开启后地表渲染从「不透明」变成「半透明」地下模型立刻透出来。它挂在 globe 下是个可细调的对象而不是单一参数。globe.translucency.frontFaceAlpha是透明度数值0到1之间1是完全不透明0是全透0.25 左右像隔着一层玻璃窗看地下。旁边还有个frontFaceAlphaByDistance按相机距离插值透明度可以让只有靠近时才透。globe.translucency.rectangle把透明范围限定在一个矩形区域地球其他地方不受影响——「只挖一口坑看地下」就是它的用途。相机这边是scene.screenSpaceCameraController.enableCollisionDetection开着时默认相机到地表就停住关掉它才能扎进地里。globe.undergroundColor负责相机入地后的背景色默认黑色换成深蓝会有种「深地」的感觉。globe.translucency.enabled true; // 地表透明总开关 globe.translucency.frontFaceAlpha 0.25; // 越小越透 globe.undergroundColor Cesium.Color.BLACK; // 入地后的背景色最小demo初始化、透明化、让相机钻进去准备工作不多一个HTML页面就够。引入 Cesium、建好 Viewer 拿到 globe 对象之后demo 的主线其实只是翻两个开关、摆一个模型const viewer new Cesium.Viewer(cesiumContainer); const globe viewer.scene.globe; viewer.scene.screenSpaceCameraController.enableCollisionDetection false; // 允许入地 globe.translucency.enabled true; // 地表透明 globe.translucency.frontFaceAlpha 0.3; // 透明度接着在地心摆一个半径1250公里的黄球代表「地核」// 地心放一个黄色球体代表地核 viewer.entities.add({ position: Cesium.Cartesian3.ZERO, ellipsoid: { radii: new Cesium.Cartesian3(1.25e6, 1.25e6, 1.25e6), material: Cesium.Color.YELLOW } });跑起来之后把相机拉远地球表面已经是一层玻璃壳滚轮推近相机钻入地下暗处里那个黄球就亮出来了。一个「透视地球」齐活。相机扎进场景后的第一人称视角三维模型四面八方把你围住——这就是关掉碰撞检测后拿到的「地下漫游」状态。想让画面更真做这三件事demo 跑通后剩下的都是打磨。光照、雾化、层级切换做完这三样画面就「像那么回事」了。光照相机在地下时太阳被地表挡住画面会暗得发闷。把globe.showGroundAtmosphere设为false去掉地面大气干扰或显式给场景补一个光源方向与强度模型细节立刻立起来。雾化scene.fog的 density 和 color 控制纵深。薄薄一层雾让远处的地下物体渐次淡出空间感立体很多别调太浓否则连地核都糊没了。层级切换地下模型分好几层地核、外核、地幔时最简单的办法是切entity.show。官方示例「地球内部」就是这么干的三个不同半径的球工具栏一点就换层。给地下模型定坐标时最省事的办法是在模型原点画一组坐标轴DebugModelMatrixPrimitive会把 XYZ 三轴按红绿蓝渲染出来位置摆歪了一眼就能看出来。翻车记录相机失控、帧率骤降、模型穿帮相机失控。现象钻下去后相机越走越深画面全黑很难拉回来。原因碰撞一关相机完全自由一旦越过近裁剪面屏幕能显示的最小距离就把模型全裁没了。一句话解法在postUpdate里加一个高度下限低于阈值就把相机抬回去。viewer.scene.postUpdate.addEventListener(() { const carto viewer.camera.positionCartographic; if (carto.height -1000) carto.height -1000; // 最深地下1000米 viewer.camera.positionCartographic carto; });帧率骤降。现象透明一开、地下模型一多帧率从 60 掉到 20。原因透明渲染让地表正反面都要画模型数量又往上叠。解法用frontFaceAlphaByDistance只在相机附近透明地下模型改用 3D Tiles一种自动分块流式加载的三维数据格式加载让引擎自己剔除看不见的部分。模型穿帮。现象地心的球看不见或模型被「地球壳」吞掉。原因地表默认渲染顺序和剔除策略在地下与在表面时并不一样。解法先确认translucency.enabled开着、orderIndependentTranslucency设为false还不行就把frontFaceAlpha调低或把模型挪出遮挡层。资源清单从示例到源码packages/sandcastle/gallery/globe-interior/官方「地球内部」示例地核、外核、地幔三层球体可直接运行packages/sandcastle/gallery/globe-translucency/ 与 packages/sandcastle/gallery/underground-color/透明的两种做法掩码、矩形区域以及地下背景色的调法packages/engine/Source/Scene/Globe.js源码入口globe 的全部渲染参数都在这里克隆仓库运行git clone https://gitcode.com/GitHub_Trending/ce/cesium然后npm install npm start把这几个开关翻完地下世界就不在剖面图纸里而在你的鼠标滚轮底下。下一步就是把黄球换成你自己的管线模型剩下的只是调数字。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 3行代码透视地球内部：Cesium WebGL地下空间可视化实战笔记
3行代码透视地球内部Cesium WebGL地下空间可视化实战笔记【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium管线一断你要的第一张图往往是三维剖面可二维地图根本画不出地下世界。剖面图纸是死的模型文件又大业务方看着都不直观。其实在Cesium三维地下空间可视化里这件事是「翻开关」级别的把地表调成透明的让相机钻下去地下模型摆上几行代码就能给地球拍一张「X光片」。这篇文章先讲清原理再跑通一个最小「透视地球」demo最后分享三个我踩过的坑。把地表调成玻璃透视的本质透视地下本质是三件小事配合完成。一是让地表变玻璃——影像和地形还在那里只是不再挡视线二是让相机能穿过地面默认它是进不了地下的三是真往地下摆点东西不然看穿了也没东西可看。三样缺一不可只开透明相机照样停在表面能进地下却没模型看到的就是一个黑窟窿。上图来自官方分屏示例一条线把地球劈成两半左右可以各显示一种状态「透」与「不透」的对比一眼可见调参数时把前后效果并排对照很方便。要翻哪些开关globe.translucency 与相机碰撞检测这些开关集中在 globe 和相机控制器上每翻一个效果各不相同。globe.translucency.enabled是总闸开启后地表渲染从「不透明」变成「半透明」地下模型立刻透出来。它挂在 globe 下是个可细调的对象而不是单一参数。globe.translucency.frontFaceAlpha是透明度数值0到1之间1是完全不透明0是全透0.25 左右像隔着一层玻璃窗看地下。旁边还有个frontFaceAlphaByDistance按相机距离插值透明度可以让只有靠近时才透。globe.translucency.rectangle把透明范围限定在一个矩形区域地球其他地方不受影响——「只挖一口坑看地下」就是它的用途。相机这边是scene.screenSpaceCameraController.enableCollisionDetection开着时默认相机到地表就停住关掉它才能扎进地里。globe.undergroundColor负责相机入地后的背景色默认黑色换成深蓝会有种「深地」的感觉。globe.translucency.enabled true; // 地表透明总开关 globe.translucency.frontFaceAlpha 0.25; // 越小越透 globe.undergroundColor Cesium.Color.BLACK; // 入地后的背景色最小demo初始化、透明化、让相机钻进去准备工作不多一个HTML页面就够。引入 Cesium、建好 Viewer 拿到 globe 对象之后demo 的主线其实只是翻两个开关、摆一个模型const viewer new Cesium.Viewer(cesiumContainer); const globe viewer.scene.globe; viewer.scene.screenSpaceCameraController.enableCollisionDetection false; // 允许入地 globe.translucency.enabled true; // 地表透明 globe.translucency.frontFaceAlpha 0.3; // 透明度接着在地心摆一个半径1250公里的黄球代表「地核」// 地心放一个黄色球体代表地核 viewer.entities.add({ position: Cesium.Cartesian3.ZERO, ellipsoid: { radii: new Cesium.Cartesian3(1.25e6, 1.25e6, 1.25e6), material: Cesium.Color.YELLOW } });跑起来之后把相机拉远地球表面已经是一层玻璃壳滚轮推近相机钻入地下暗处里那个黄球就亮出来了。一个「透视地球」齐活。相机扎进场景后的第一人称视角三维模型四面八方把你围住——这就是关掉碰撞检测后拿到的「地下漫游」状态。想让画面更真做这三件事demo 跑通后剩下的都是打磨。光照、雾化、层级切换做完这三样画面就「像那么回事」了。光照相机在地下时太阳被地表挡住画面会暗得发闷。把globe.showGroundAtmosphere设为false去掉地面大气干扰或显式给场景补一个光源方向与强度模型细节立刻立起来。雾化scene.fog的 density 和 color 控制纵深。薄薄一层雾让远处的地下物体渐次淡出空间感立体很多别调太浓否则连地核都糊没了。层级切换地下模型分好几层地核、外核、地幔时最简单的办法是切entity.show。官方示例「地球内部」就是这么干的三个不同半径的球工具栏一点就换层。给地下模型定坐标时最省事的办法是在模型原点画一组坐标轴DebugModelMatrixPrimitive会把 XYZ 三轴按红绿蓝渲染出来位置摆歪了一眼就能看出来。翻车记录相机失控、帧率骤降、模型穿帮相机失控。现象钻下去后相机越走越深画面全黑很难拉回来。原因碰撞一关相机完全自由一旦越过近裁剪面屏幕能显示的最小距离就把模型全裁没了。一句话解法在postUpdate里加一个高度下限低于阈值就把相机抬回去。viewer.scene.postUpdate.addEventListener(() { const carto viewer.camera.positionCartographic; if (carto.height -1000) carto.height -1000; // 最深地下1000米 viewer.camera.positionCartographic carto; });帧率骤降。现象透明一开、地下模型一多帧率从 60 掉到 20。原因透明渲染让地表正反面都要画模型数量又往上叠。解法用frontFaceAlphaByDistance只在相机附近透明地下模型改用 3D Tiles一种自动分块流式加载的三维数据格式加载让引擎自己剔除看不见的部分。模型穿帮。现象地心的球看不见或模型被「地球壳」吞掉。原因地表默认渲染顺序和剔除策略在地下与在表面时并不一样。解法先确认translucency.enabled开着、orderIndependentTranslucency设为false还不行就把frontFaceAlpha调低或把模型挪出遮挡层。资源清单从示例到源码packages/sandcastle/gallery/globe-interior/官方「地球内部」示例地核、外核、地幔三层球体可直接运行packages/sandcastle/gallery/globe-translucency/ 与 packages/sandcastle/gallery/underground-color/透明的两种做法掩码、矩形区域以及地下背景色的调法packages/engine/Source/Scene/Globe.js源码入口globe 的全部渲染参数都在这里克隆仓库运行git clone https://gitcode.com/GitHub_Trending/ce/cesium然后npm install npm start把这几个开关翻完地下世界就不在剖面图纸里而在你的鼠标滚轮底下。下一步就是把黄球换成你自己的管线模型剩下的只是调数字。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考