尧图网站建设 
CesiumJS 地下可视化3 处配置让浏览器相机钻入地球内部【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesiumCesiumJS 是一个用 WebGL 在浏览器中渲染三维地球的开源 JavaScript 库。当你的需求转向地下——看三维地质模型、做 WebGL 地下管网展示而不是浏览地表时它同样够用。本文围绕CesiumJS 地下可视化拆解 3 处关键配置带你在浏览器里搭出一个能钻入地下的场景并解释每个首次出现的技术名词。 相机默认会被地表挡住默认情况下CesiumJS 的相机控制器开着碰撞检测collision detection防止相机穿进地形的开关。你往地下飞相机一碰到地表就被弹回来。所以第一步只有一行配置const scene viewer.scene; scene.screenSpaceCameraController.enableCollisionDetection false; scene.globe.translucency.enabled true; scene.globe.undergroundColor Cesium.Color.fromCssColorString(#0b0f1e);enableCollisionDetection关掉后相机可以随意穿越地形、飞到任意负高度translucency.enabled则打开半透明让地表部分透出背后内容。但此时你钻下去只会看到一片黑——地表背面还没画东西这正是下面两节要解决的。 给地表加一层可透视的外衣想让地球内部露出来CesiumJS 给了两条路可以单选也可以叠加全局半透明globe.translucency.enabled true把整张地表当玻璃看。局部挖洞给globe.translucency.rectangle指定一块经纬度矩形只有那块变透明其余照旧适合只切开一个剖面。如果底图是卫星影像还能把某一整片颜色抠掉。仓库里 Globe Interior 示例packages/sandcastle/gallery/globe-interior/就是让海洋那片深蓝变透明从而露出下面的地核、地幔const baseLayer viewer.scene.imageryLayers.get(0); baseLayer.colorToAlpha new Cesium.Color(0.0, 0.016, 0.059); // 海洋的颜色 baseLayer.colorToAlphaThreshold 0.2;colorToAlpha的意思是凡是接近这个颜色的像素都算成透明threshold越大被抠掉的范围就越宽。 把模型放进负高度空间CesiumJS 用椭球面上的海拔单位米来定位物体地下就对应负高度。给模型一个负height它就落到地表以下再配上随深度淡入的背景色const g viewer.scene.globe; g.undergroundColorAlphaByDistance.near 500; g.undergroundColorAlphaByDistance.far 30000; g.undergroundColorAlphaByDistance.nearValue 0.0; g.undergroundColorAlphaByDistance.farValue 1.0; viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-3.82, 53.11, -500), model: { uri: models/ParcLeadMine.glb } });undergroundColorAlphaByDistance是这节的重点它定义一段距离区间让地下背景色随着你离地表越来越远从全透明线性渐变到全不透明。效果是——刚钻进地表时背景几乎看不见越往深处底色越实模型自然浮现而不是糊在一团黑里。 两个典型场景怎么落地常见的应用方向有一堆这里只深挖两个其余一句带过。地质与矿产剖面把仓库自带的ParcLeadMine模型Apps/SampleData/models/ParcLeadMine/放到负高度接上上面的地色渐变就是一个能旋转、能钻入的矿产剖面。隧道掘进监控、矿藏储量展示走同一套模型 负高度 底色渐变。城市地下管网管线本质是大量重复的几何体。做法是用 Polyline 或 3D Tiles 按真实坐标把管网建出来管径与埋深映射到负高度阀门、接头这类重复管件用实例化渲染省内存。查询交互挂在scene.pick上点哪段管子就弹哪段管子的属性。至于地下空间规划、地质雷达数据叠加思路一致换掉模型与数据配置几乎不用动。⚠️ 三个容易踩的坑深度冲突Z-fighting两个几乎贴在一起的地下平面在屏幕上互相闪烁。解法是把两层在负高度上错开几米或给后一层调整depthTest、renderOrder。近裁剪面切模型相机贴太近时近裁剪面视锥体离相机最近的那个面会把地下模型从中间切掉。保持相机与模型的安全距离或调小camera.nearToFarDistance。一次加载太多地下网格密度高整城模型一把梭会卡死。按 tile 分块、配合磁盘缓存按需加载CesiumJS 的 3D Tiles 机制天然支持调优细节见Documentation/Contributors/PerformanceTestingGuide/。✅ 下一步可以直接做的三件事打开packages/sandcastle/gallery/globe-interior/改一行颜色先亲眼看到地球内部。把任意.glb模型的位置高度改成负数再加一段undergroundColorAlphaByDistance验证钻下去有背景。给管网数据接上scene.pick做出第一个点管线弹属性的交互。【免费下载链接】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 是一个用 WebGL 在浏览器中渲染三维地球的开源 JavaScript 库。当你的需求转向地下——看三维地质模型、做 WebGL 地下管网展示而不是浏览地表时它同样够用。本文围绕CesiumJS 地下可视化拆解 3 处关键配置带你在浏览器里搭出一个能钻入地下的场景并解释每个首次出现的技术名词。 相机默认会被地表挡住默认情况下CesiumJS 的相机控制器开着碰撞检测collision detection防止相机穿进地形的开关。你往地下飞相机一碰到地表就被弹回来。所以第一步只有一行配置const scene viewer.scene; scene.screenSpaceCameraController.enableCollisionDetection false; scene.globe.translucency.enabled true; scene.globe.undergroundColor Cesium.Color.fromCssColorString(#0b0f1e);enableCollisionDetection关掉后相机可以随意穿越地形、飞到任意负高度translucency.enabled则打开半透明让地表部分透出背后内容。但此时你钻下去只会看到一片黑——地表背面还没画东西这正是下面两节要解决的。 给地表加一层可透视的外衣想让地球内部露出来CesiumJS 给了两条路可以单选也可以叠加全局半透明globe.translucency.enabled true把整张地表当玻璃看。局部挖洞给globe.translucency.rectangle指定一块经纬度矩形只有那块变透明其余照旧适合只切开一个剖面。如果底图是卫星影像还能把某一整片颜色抠掉。仓库里 Globe Interior 示例packages/sandcastle/gallery/globe-interior/就是让海洋那片深蓝变透明从而露出下面的地核、地幔const baseLayer viewer.scene.imageryLayers.get(0); baseLayer.colorToAlpha new Cesium.Color(0.0, 0.016, 0.059); // 海洋的颜色 baseLayer.colorToAlphaThreshold 0.2;colorToAlpha的意思是凡是接近这个颜色的像素都算成透明threshold越大被抠掉的范围就越宽。 把模型放进负高度空间CesiumJS 用椭球面上的海拔单位米来定位物体地下就对应负高度。给模型一个负height它就落到地表以下再配上随深度淡入的背景色const g viewer.scene.globe; g.undergroundColorAlphaByDistance.near 500; g.undergroundColorAlphaByDistance.far 30000; g.undergroundColorAlphaByDistance.nearValue 0.0; g.undergroundColorAlphaByDistance.farValue 1.0; viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-3.82, 53.11, -500), model: { uri: models/ParcLeadMine.glb } });undergroundColorAlphaByDistance是这节的重点它定义一段距离区间让地下背景色随着你离地表越来越远从全透明线性渐变到全不透明。效果是——刚钻进地表时背景几乎看不见越往深处底色越实模型自然浮现而不是糊在一团黑里。 两个典型场景怎么落地常见的应用方向有一堆这里只深挖两个其余一句带过。地质与矿产剖面把仓库自带的ParcLeadMine模型Apps/SampleData/models/ParcLeadMine/放到负高度接上上面的地色渐变就是一个能旋转、能钻入的矿产剖面。隧道掘进监控、矿藏储量展示走同一套模型 负高度 底色渐变。城市地下管网管线本质是大量重复的几何体。做法是用 Polyline 或 3D Tiles 按真实坐标把管网建出来管径与埋深映射到负高度阀门、接头这类重复管件用实例化渲染省内存。查询交互挂在scene.pick上点哪段管子就弹哪段管子的属性。至于地下空间规划、地质雷达数据叠加思路一致换掉模型与数据配置几乎不用动。⚠️ 三个容易踩的坑深度冲突Z-fighting两个几乎贴在一起的地下平面在屏幕上互相闪烁。解法是把两层在负高度上错开几米或给后一层调整depthTest、renderOrder。近裁剪面切模型相机贴太近时近裁剪面视锥体离相机最近的那个面会把地下模型从中间切掉。保持相机与模型的安全距离或调小camera.nearToFarDistance。一次加载太多地下网格密度高整城模型一把梭会卡死。按 tile 分块、配合磁盘缓存按需加载CesiumJS 的 3D Tiles 机制天然支持调优细节见Documentation/Contributors/PerformanceTestingGuide/。✅ 下一步可以直接做的三件事打开packages/sandcastle/gallery/globe-interior/改一行颜色先亲眼看到地球内部。把任意.glb模型的位置高度改成负数再加一段undergroundColorAlphaByDistance验证钻下去有背景。给管网数据接上scene.pick做出第一个点管线弹属性的交互。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考