CesiumJS 3D地球可视化快速3步跑通第一个3D地球【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesiumCesiumJS 是一个让浏览器直接运行 3D 地球的 JavaScript 库——不装插件、不写原生代码靠 WebGL 渲染地球、地形、glTF 模型和十亿级城市点云。这篇文章写给第一次接触它的人它能干什么、3 步怎么跑通、深水区在哪。 CesiumJS不是地图控件而是3D地理空间引擎你可能把它当成往页面里丢一个地图组件类似某个 leaflet 的 3D 版。但它的强项是一颗能从卫星高度一直缩到一块门牌的地心 3D 地球上面可以叠模型、点云和时序数据本质更接近地理空间渲染引擎而不是 UI 控件。3D 地球按真实球面坐标渲染地形、大气和海洋但它不是平面 2D 地图控件2D 视图要切换场景模式glTF 加载glb/gltf 丢上地球即显示支持动画、蒙皮和实例化但它不做建模模型得从别处来3D Tiles 流式十亿级点云和建筑按视口分块拉取但它不替你扫描数据要先备好时序数据CZML、GeoJSON 驱动位置和属性随时间变化但它不是视频时间轴靠数据插值WebGL 渲染硬件加速桌面和移动端同一套代码但它不是节点编辑器没有可拖的可视化场景图一句话CesiumJS 不是贴进页面的地图而是你要运行的地理空间场景引擎。️ 把模型放上地球、把点云看进楼里、把时间轴动起来三个实用场景把一个 3D 文物模型放上地球你手里有一个从建模工具导出的 glb想把它放在地球某个具体位置还能旋转缩放查看细节。静态网站做不了地图控件也挂不住。CesiumJS 用 Entity API 就能解决给个位置、model: { uri }、朝向和缩放模型就落在地球上。这份完整的可切换选项列表在packages/sandcastle/gallery/3d-models/main.js里从 CesiumMan 到 Draco 压缩的 MilkTruck 都加载了一遍。这是 CesiumJS 的 glTF 测试数据目录里的渲染测试结果展示两种几何材质在地球场景中的差异展示十亿点级的城市点云整城扫描下来的点云动辄几十 GB一次全量加载再好的机器也卡死。3D Tiles 的思路是把城市切成瓦片、只拉当前视口里的块再用pointCloudShading让点云着色接近真实建筑。packages/sandcastle/gallery/montreal-point-cloud/main.js就是完整演示——一颗约 100 亿点的蒙特利尔。这是 CesiumJS 的城市点云渲染效果相机的视角系统支持贴近建筑观察细节用时间轴回放一条卫星轨迹你想让观众回看目标过去一小时的移动过程而不是给一条静止轨迹。把数据写成 CZMLViewer的时间轴就会驱动时钟位置、颜色、标签在关键帧之间自动插值。Apps/SampleData/目录下放着现成的TwoSats.czml、Vehicle.czml可以直接在示例环境里加载。 从零到跑通 3D 地球的三步拉代码装依赖git clone https://gitcode.com/GitHub_Trending/ce/cesium然后在根目录npm install。仓库要求Node 22。启动开发服务npm start它会依次构建cesium/engine和cesium/widgets然后监听8080 端口。打开最小示例浏览器访问http://localhost:8080/Apps/HelloWorld.html一个全屏地球就出来了这页的 JS 只有一行new Cesium.Viewer。逛示例库首次构建完成后首页会进入 Sandcastle 示例 playground可以点开 3d-models、montreal-point-cloud 这类示例直接运行。三步走完3D 地球已经在浏览器里转了。最小的入口就是 Apps/HelloWorld.html三十行值得逐行读一遍。 进阶能力样式、实例化与压缩不动模型按属性给整城点云上色你想高亮建筑、隐藏植被但为每个效果重新导出一份模型不现实。3D Tiles 的要素可以带 metadataCesium3DTileStyle按Classification字段写颜色和显隐条件勾选一下就即时切换。montreal-point-cloud 示例里的applyStyle函数就是现成模板。同一模型实例化千份成本不是千倍满屏相同的树、一整队相同载具逐个加载会让内存和 draw call 一起爆炸。glTF 的实例化让几何体只解析一次、批量输出实例复用。3d-models 示例里的 Instanced Box 选项加载Apps/SampleData/models/BoxInstanced/BoxInstanced.gltf是个小而完整的例子。用 Draco 和 KTX2 把模型体积砍一个数量级模型不大、纹理大全精度贴图走网络太浪费。Draco 压几何、KTX2Basis压纹理同一辆 MilkTruck 的下载体积能小一个量级。3d-models 示例里原版和压缩版可以切换对比代码会先用Cesium.FeatureDetection.supportsBasis检测浏览器支持防止不支持时白屏。⚠️ 别踩这四个坑Node 版本过低package.json声明了node: 22.0.0旧版本上npm start会直接报错。升级到 22或用 nvm 切换。双击 html 打开HelloWorld.html 引用的是../Build/CesiumUnminified/Cesium.js这个文件要npm start构建后才存在而且file://还有 CORS 和 MIME 问题。始终走 npm start 的服务别直接开文件。没配 Cesium ion token蒙特利尔点云、World Terrain 都靠Cesium.Ion.defaultAccessToken拉资源token 没配好控制台会报错。先去 ion 申请 token 赋值或先跑Apps/SampleData/下本地数据的示例。首次启动慢server.js 默认会为 Sandcastle 生成语义搜索 embeddings首次启动明显变慢。只是想跑起来的话给启动命令加--no-embeddings跳过。 仓库里值得逛的三个目录packages/sandcastle/gallery/两百多个可运行示例每个子目录一个 index.html 加一个 main.js学 API 最快的方式就是照着它写。Apps/SampleData/示例数据全家桶models 下放模型、Cesium3DTiles 下放 3D Tiles、还有 .czml 时序文件你写自己的 demo 时 URI 直接指向这里。packages/engine/Source/引擎核心代码Core/ 是数学工具、Scene/ 是渲染、Shaders/ 里有三百多个 GLSL好奇它到底怎么渲染的就从这儿翻。 接下来做什么你刚跑通了最小版本地球出来了、模型能加载、点云会流式加载。深入的方向是把packages/sandcastle/gallery/montreal-point-cloud/main.js里的 metadata 样式读透会写Cesium3DTileStyle之后你的数据就从能看变成能交互。拓展的方向是把 3d-models 里的 URI 换成你自己的 glb让这颗 3D 地球变成你的展示舞台。现在就去克隆仓库跑npm start打开 HelloWorld.html看看你的第一帧 3D 地球。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考