CesiumJS 三维地下可视化3 段代码搭建可交互的地下场景【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesiumCesiumJS 是一个开源的 JavaScript 三维地球引擎结合地形深度测试与 undergroundColor 机制可以把三维模型、管线、地质结构放到地表以下的负高程空间里形成可交互的三维地下可视化场景。本文从仓库自带示例中挑出 4 个高频能力和 3 个常见坑。CesiumJS 能完成的 4 件地下可视化任务以下能力都来自现成 API不需要自己写着色器。1. 把三维模型放到地下输入一个本地 glb 模型和带负高程的经纬度坐标做法是把负高程传给 Cartesian3.fromDegrees 创建 Entity得到渲染在地表以下指定深度的模型相机进入地下后可以直接看到它。可参考 underground-color 示例源码。2. 从地下视角透视地表输入一个颜色和距离区间做法是设置 globe.undergroundColor 与 undergroundColorAlphaByDistance得到相机位于地下时地形正面被半透明色填充的效果透过这层外壳能看到地下内容。3. 在剖切地形上开观察口输入围成一个多边形的经纬度数组做法是把 ClippingPolygonCollection 赋给 globe.clippingPolygons得到该区域地形被切掉的效果地下模型从上方直接露出适合做剖面展示。4. 在三维城市上叠加地下管网输入一个摄影测量 3D Tiles 城市模型做法是用 Cesium3DTileset 加载后把管线 Entity 放在同一场景得到管线与实景建筑共存、可分别点击拾取的场景。跟做一负高程放模型允许相机进地形这段代码创建 Viewer、关闭相机碰撞检测并把一个矿井模型放到地表下 500 米。const viewer new Cesium.Viewer(cesiumContainer); // 关闭相机碰撞检测否则无法飞到地形以下 viewer.scene.screenSpaceCameraController.enableCollisionDetection false; // 第三个参数为负高程地表以下 500 米 const position Cesium.Cartesian3.fromDegrees(-3.82, 53.12, -500); viewer.entities.add({ position, model: { uri: models/mine.glb }, });运行后指定坐标的地表下出现矿井模型拖动相机往下飞可以从地下抬头看地形。跟做二配置 undergroundColor 让地下视角透视地形这段代码让相机进入地下后把地形正面填充成半透明灰色透明度随距离相机远近渐变。const globe viewer.scene.globe; globe.undergroundColor Cesium.Color.LIGHTSLATEGRAY; // 距相机 1km 处透明度 01000km 处透明度 1 const alpha globe.undergroundColorAlphaByDistance; alpha.near 1000; alpha.far 1000000; alpha.nearValue 0.0; alpha.farValue 1.0;运行后从地面向下飞时地面由不透明地形变成灰色半透明壳离地面越近越透明可以直视矿井模型。API 定义见 Globe 源码。跟做三用 clippingPolygons 剖切出观察口这段代码用一个矩形多边形切掉对应区域的地形让地下模型从上方直接露出。const positions Cesium.Cartesian3.fromDegreesArray([ -3.9, 53.1, -3.75, 53.1, -3.75, 53.2, -3.9, 53.2, -3.9, 53.1, ]); const polygon new Cesium.ClippingPolygon({ positions }); viewer.scene.globe.clippingPolygons new Cesium.ClippingPolygonCollection({ polygons: [polygon] });运行后矩形范围内被切开地下模型直接可见范围外不受影响。鼠标绘制多边形、实时增删剖切口的完整交互在 clipping-regions 示例 里。三维地下可视化三个常见问题现象、原因、解法坑一相机降不到地下。现象怎么拖拽相机都停在原地进不了地形。原因默认 enableCollisionDetection 为 true地形被当作碰撞体。解法把 viewer.scene.screenSpaceCameraController.enableCollisionDetection 设为 false。坑二从地下往上看是黑屏。现象相机在地下时视野被遮挡看不到任何内容。原因地形正面正常绘制把地下内容挡住了。解法按跟做二设置 undergroundColor如果只想让海洋或某块区域变透明改用 globe.translucency.enabled true再配 translucency.rectangle 或 frontFaceAlpha写法见 globe-interior 示例。坑三两层模型几乎贴平时闪烁。现象模型表面与地形表面颜色交替抖动即 Z-fighting。原因深度缓冲精度不够无法区分距离很近的两个面。解法让地层模型与地表保持 10 米以上的垂直间隔不要共面必须共面展示时用 clippingPolygons 切掉其中一层。三种透出地下方案的参数对照方案适合场景关键参数成本undergroundColor地下视角快速半透明undergroundColorAlphaByDistance最低几行代码translucency海洋或指定区域透明translucency.frontFaceAlpha / rectangle中等依赖底图颜色clippingPolygons硬边界剖切、剖面展示ClippingPolygonCollection较高切区越大开销越大下一步3 个可立即做的延伸给模型接属性查询用 scene.pick 判断是否点到管线模型读取模型元数据后弹属性面板。理由拾取是内置 API不需要额外依赖。给建筑切剖面把同一个 ClippingPolygonCollection 赋给 Cesium3DTileset.clippingPolygons建筑随地形一起切开形成地上建筑加地下管线的完整剖面。理由3D Tiles 与 globe 共用同一套剖切多边形对象。录一段地下飞越监听 camera.moveEnd 记录从地表降到地下的相机路径配合 Timeline 回放。理由可以演示剖切口与地下视角的切换过程适合做汇报演示。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 CesiumJS 三维地下可视化：3 段代码搭建可交互的地下场景
CesiumJS 三维地下可视化3 段代码搭建可交互的地下场景【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesiumCesiumJS 是一个开源的 JavaScript 三维地球引擎结合地形深度测试与 undergroundColor 机制可以把三维模型、管线、地质结构放到地表以下的负高程空间里形成可交互的三维地下可视化场景。本文从仓库自带示例中挑出 4 个高频能力和 3 个常见坑。CesiumJS 能完成的 4 件地下可视化任务以下能力都来自现成 API不需要自己写着色器。1. 把三维模型放到地下输入一个本地 glb 模型和带负高程的经纬度坐标做法是把负高程传给 Cartesian3.fromDegrees 创建 Entity得到渲染在地表以下指定深度的模型相机进入地下后可以直接看到它。可参考 underground-color 示例源码。2. 从地下视角透视地表输入一个颜色和距离区间做法是设置 globe.undergroundColor 与 undergroundColorAlphaByDistance得到相机位于地下时地形正面被半透明色填充的效果透过这层外壳能看到地下内容。3. 在剖切地形上开观察口输入围成一个多边形的经纬度数组做法是把 ClippingPolygonCollection 赋给 globe.clippingPolygons得到该区域地形被切掉的效果地下模型从上方直接露出适合做剖面展示。4. 在三维城市上叠加地下管网输入一个摄影测量 3D Tiles 城市模型做法是用 Cesium3DTileset 加载后把管线 Entity 放在同一场景得到管线与实景建筑共存、可分别点击拾取的场景。跟做一负高程放模型允许相机进地形这段代码创建 Viewer、关闭相机碰撞检测并把一个矿井模型放到地表下 500 米。const viewer new Cesium.Viewer(cesiumContainer); // 关闭相机碰撞检测否则无法飞到地形以下 viewer.scene.screenSpaceCameraController.enableCollisionDetection false; // 第三个参数为负高程地表以下 500 米 const position Cesium.Cartesian3.fromDegrees(-3.82, 53.12, -500); viewer.entities.add({ position, model: { uri: models/mine.glb }, });运行后指定坐标的地表下出现矿井模型拖动相机往下飞可以从地下抬头看地形。跟做二配置 undergroundColor 让地下视角透视地形这段代码让相机进入地下后把地形正面填充成半透明灰色透明度随距离相机远近渐变。const globe viewer.scene.globe; globe.undergroundColor Cesium.Color.LIGHTSLATEGRAY; // 距相机 1km 处透明度 01000km 处透明度 1 const alpha globe.undergroundColorAlphaByDistance; alpha.near 1000; alpha.far 1000000; alpha.nearValue 0.0; alpha.farValue 1.0;运行后从地面向下飞时地面由不透明地形变成灰色半透明壳离地面越近越透明可以直视矿井模型。API 定义见 Globe 源码。跟做三用 clippingPolygons 剖切出观察口这段代码用一个矩形多边形切掉对应区域的地形让地下模型从上方直接露出。const positions Cesium.Cartesian3.fromDegreesArray([ -3.9, 53.1, -3.75, 53.1, -3.75, 53.2, -3.9, 53.2, -3.9, 53.1, ]); const polygon new Cesium.ClippingPolygon({ positions }); viewer.scene.globe.clippingPolygons new Cesium.ClippingPolygonCollection({ polygons: [polygon] });运行后矩形范围内被切开地下模型直接可见范围外不受影响。鼠标绘制多边形、实时增删剖切口的完整交互在 clipping-regions 示例 里。三维地下可视化三个常见问题现象、原因、解法坑一相机降不到地下。现象怎么拖拽相机都停在原地进不了地形。原因默认 enableCollisionDetection 为 true地形被当作碰撞体。解法把 viewer.scene.screenSpaceCameraController.enableCollisionDetection 设为 false。坑二从地下往上看是黑屏。现象相机在地下时视野被遮挡看不到任何内容。原因地形正面正常绘制把地下内容挡住了。解法按跟做二设置 undergroundColor如果只想让海洋或某块区域变透明改用 globe.translucency.enabled true再配 translucency.rectangle 或 frontFaceAlpha写法见 globe-interior 示例。坑三两层模型几乎贴平时闪烁。现象模型表面与地形表面颜色交替抖动即 Z-fighting。原因深度缓冲精度不够无法区分距离很近的两个面。解法让地层模型与地表保持 10 米以上的垂直间隔不要共面必须共面展示时用 clippingPolygons 切掉其中一层。三种透出地下方案的参数对照方案适合场景关键参数成本undergroundColor地下视角快速半透明undergroundColorAlphaByDistance最低几行代码translucency海洋或指定区域透明translucency.frontFaceAlpha / rectangle中等依赖底图颜色clippingPolygons硬边界剖切、剖面展示ClippingPolygonCollection较高切区越大开销越大下一步3 个可立即做的延伸给模型接属性查询用 scene.pick 判断是否点到管线模型读取模型元数据后弹属性面板。理由拾取是内置 API不需要额外依赖。给建筑切剖面把同一个 ClippingPolygonCollection 赋给 Cesium3DTileset.clippingPolygons建筑随地形一起切开形成地上建筑加地下管线的完整剖面。理由3D Tiles 与 globe 共用同一套剖切多边形对象。录一段地下飞越监听 camera.moveEnd 记录从地表降到地下的相机路径配合 Timeline 回放。理由可以演示剖切口与地下视角的切换过程适合做汇报演示。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考