企业官网建设流程全解析

Cesium 地表透明化实战：一个能钻地下的 WebGL 场景，3 段代码 20 行

【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium

做 Cesium 地下空间可视化，绕不开两件事：把不透明的地表调透，再把相机安全地放下去。本文用不到 20 行代码走通这条链路。

先讲个常见需求：地铁运营方要把管线竣工图、地质钻孔和周边 BIM 放进同一个场景，找出检修井与断裂带的位置关系。用 Cesium 搭这个场景时，你大概率会卡在三处：地表怎么调透？地下的模型往哪放？相机怎么限制，别一头扎进地心？下面按"能做什么 → 怎么跑起来 → 怎么调 → 怎么修错"的顺序，一次讲清。

一张表看懂：能力、格式与场景

Cesium 基于 WGS84 椭球建坐标，这是白话说法：地球被当成一个长轴 6378137 米、短轴略短的椭球体，任何地下点都能用经度、纬度和海拔高度唯一定位——所以"地下 500 米"就是高度填 -500。地下建模时你按这个坐标系摆模型即可，典型组合如下：

数据侧还有现成入口：仓库里的Apps/SampleData/下就有 CZML、KML、glb 点云样例数据，可直接拖进自己的项目测试。

最小可跑案例：透明地表、地下模型、相机下限

准备环境与 Viewer

git clone https://gitcode.com/GitHub_Trending/ce/cesium

仓库里跑着Apps/下的开发服务器就能打开示例。下面是整条主线的全部代码，其余细节（图层加载、事件绑定）一句话带过。初始化 Viewer，同时关掉碰撞检测——它默认阻止相机进入地下：

const viewer = new Cesium.Viewer("cesiumContainer", { orderIndependentTranslucency: false, }); viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;

orderIndependentTranslucency控制透明图层的混合排序，关掉它透明球壳边缘更干净，代价是多一点排序开销。

globe.translucency 三行配置

const globe = viewer.scene.globe; globe.showGroundAtmosphere = false; globe.baseColor = Cesium.Color.TRANSPARENT; globe.translucency.enabled = true; globe.translucency.frontFaceAlpha = 0.25;

frontFaceAlpha = 0.25表示地表只保留 25% 不透明度。如果只想挖一块透明区而不是全地球透明，再加一行globe.translucency.rectangle = Cesium.Rectangle.fromDegrees(...)，参数按西经、南纬、东经、北纬传。

放模型并限制相机到 -1000 m

把相机放到地下 500 米、加载一个示例 glb（仓库自带矿井模型，路径在Apps/SampleData/models/），再挂一个每帧回调把高度钳在 -1000 米以上：

viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-3.82518, 53.11728, -500), model: { uri: "ParcLeadMine.glb" }, }); viewer.scene.postUpdate.addEventListener(() => { if (viewer.camera.positionCartographic.height < -1000) { viewer.camera.positionCartographic.height = -1000; } });

到这里，一个可下探的地面透明场景就跑通了。

调优手册：先保帧率，再谈观感

帧率侧

• 瓦片粒度：3D Tiles 自带细节层级，离得远自动切粗瓦片。想立刻降载就调viewer.scene.globe.tileLoadFactor（默认 1.0），压到 0.5 让远处瓦片停载，先保住 60fps 再谈画质。
• 剔除与裁剪：视锥外内容不渲染，这是引擎默认行为；你能做的是别一次塞入几十层全量 3D Tiles，按业务分区懒加载。

观感侧

• 雾：scene.fog.density默认 0.0006，地下场景建议调小到 0.0002，再给scene.fog.color一个深蓝色，纵深立刻出来。
• 地下底色：globe.undergroundColor设一个深色打底，配合undergroundColorAlphaByDistance.near / far两档距离做透明度渐变，相机越深背景越实，模型对比度越高。

踩坑速查

资源直达

示例与文档都在仓库内，改参数时对照看：

• 地球内部分层示例：packages/sandcastle/gallery/globe-interior/
• 地下模型 + 底色距离渐变示例：packages/sandcastle/gallery/underground-color/
• Globe 全部属性（translucency、undergroundColor 所在类）：packages/engine/Source/Scene/Globe.js
• Fog 雾效参数：packages/engine/Source/Scene/Fog.js

【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium