WebGL2（Cesium）

fanged

已于 2025-05-30 09:10:23 修改

阅读量142

点赞数 3

分类专栏：计算机网路 GUI Web开发文章标签：前端

于 2025-05-13 14:38:32 首次发布

本文链接：https://blog.csdn.net/fanged/article/details/147924088

版权

Web开发同时被 3 个专栏收录

11 篇文章

订阅专栏

GUI

9 篇文章

订阅专栏

计算机网路

6 篇文章

订阅专栏

1 Cesium简介

Cesium 是一个开源的 JavaScript 3D 地理空间可视化引擎，专为构建高性能的虚拟地球和地图应用而设计。它支持从全球尺度到微观场景的三维数据渲染，广泛应用于测绘、智慧城市、军事仿真、气象分析等领域。

核心功能：

全球地形渲染
集成高精度地形数据（如Cesium World Terrain），支持动态地形开挖、坡度分析。
多源数据支持
可加载 3D Tiles（倾斜摄影/BIM）、GeoJSON、KML、GLTF/GLB（模型）、点云等格式。
动态场景交互
支持时间轴动画（如卫星轨迹模拟）、实时数据流（如气象变化）。
跨平台
基于WebGL，无需插件，兼容浏览器和移动端。

Cesium Sandcastle

2 一些使用实例

因浏览器安全策略，要使用本地服务器访问，不能直接打开。

python3 -m http.server 8000

2.1 地图

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cesium基础地球</title>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
    #cesiumContainer { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'TOKEN'; // 替换为你的Token
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain(),
      timeline: false,
      animation: false
    });
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100000) // 北京上空
    });
  </script>
</body>
</html>

效果：

2.2 建筑3D

展示纽约的模型

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cesium基础地球</title>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
    #cesiumContainer { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'TOKEN'; // 替换为你的Token
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain(),
      timeline: false,
      animation: false
    });
    viewer.scene.primitives.add(
  Cesium.createOsmBuildings() // 加载OSM建筑数据
);
viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(-74.019, 40.6912, 1000) // 纽约曼哈顿
});
  </script>
</body>
</html>

效果：

2.3 GLTF/GLB建模

GLTF和之前点云写过的GLB其实是一个东西，不过一个是json文本方便调试，一个是二进制。

GLTFS 模型库6：国内网站，主要提供 GLTF 格式的 3D 场景和模型，涵盖数字孪生应用中常见的建筑、电器、设备、道路、绿植、交通设施、交通工具、景观等种类的模型。网站采用 WebGL 技术，通过主流浏览器即可在电脑或手机上流畅地预览、下载 3D 场景和模型，并且所有模型均可以免费下载，还提供 “本地模型预览” 工具，无需安装专业软件，通过浏览器即可直接查看 GLTF 格式 3D 模型。
CGTrader4：有大量的 GLTF 格式 3D 模型可供下载，目前该平台上有 173,183 个 GLTF 格式的 3D 模型准备好可供下载。用户可以使用搜索过滤器来查找 PBR、绑定、动画或可打印的 3D 模型，对于游戏开发者，还可以使用 “多边形数量” 过滤器来查看低多边形 3D 模型，以减少渲染所需的计算能力。
Sketchfab7：提供了很多 GLTF 格式模型，并且可以在线预览 3D 效果，不过该网站是国外网站，打开速度可能会慢点。
[glTF - Sample - Models](GitHub - KhronosGroup/glTF: glTF – Runtime 3D Asset Delivery - Sample - Models/tree/main)7：这是 GitHub 上的一个开源项目，提供各种 GLTF 格式 3D 模型，Three.js examples 里面很多模型都是用的这里面的。

此外，[Modelo](https://www.modelo.io/blog/index.php/2022/01/05/modelofree - online - gltf - viewer/) 是一个在线查看、发布和共享 GLTF 文件的工具。GLTF Viewer 2.0可以查看 GLTF 格式的 3D 模型，并且能给出 GLTF 模型的格式验证报告8。如果需要对模型进行格式转换，3Dconvert支持多种模型格式转换为 GLTF 格式1。

故宫里面加个桌子

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cesium基础地球</title>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
    #cesiumContainer { width: 100%; height: 100vh; }
  </style>
</head>
<body>

<div id="cesiumContainer"></div>
<script>
  // 初始化 Cesium Viewer
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzYjVkMmRhYy03OGMxLTQwM2EtYWY0Ny00MDM4YjhjZmVkNzIiLCJpZCI6MzA0Mzc4LCJpYXQiOjE3NDc3MzE5NDN9.kzP84v1ibzx6iJP_ESqc-PiJ6-fTbHQvCR2KMc9lvws';
  const viewer = new Cesium.Viewer("cesiumContainer", {
    //terrainProvider: Cesium.createWorldTerrain(),
    terrainProvider: new Cesium.EllipsoidTerrainProvider(),
  });

  // 加载 Table.glb 模型（位于 index.html 同级目录）
  const position = Cesium.Cartesian3.fromDegrees(116.3913, 39.9075, 0); // 设置经纬度（北京为例）
  const heading = Cesium.Math.toRadians(0); // 朝向
  const pitch = 0;
  const roll = 0;
  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

  viewer.entities.add({
    name: "Table Model",
    position: position,
    orientation: orientation,
    model: {
      uri: "Table.glb", // 同级目录下的模型
      scale: 10.0
    }
  });

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.3913, 39.9075, 100), // 镜头飞到模型位置
  });
</script>

</body>
</html>

效果

3 Cesium API手册

APIs – Cesium

很神奇，里面还有native c++的接口，可以直接调用OpenGL/Vulkan/Unreal/Unity进行渲染。。。

这部分后面看看再完善吧。。。

4 Cesium和WebGL

Cesium是封装了webgl，

调用过程：

CesiumJS
└─ Scene（场景管理器）
└─ FrameState（帧状态）
└─ Render Loop（渲染循环）
└─ Context（封装 WebGLRenderingContext）
└─ ShaderProgram / VertexArray / DrawCommand 等
└─ 最终调用 WebGL API 进行绘制

源码部分使用如下：

目录	作用
`Source/Renderer/Context.js`	管理 WebGL 上下文和基本状态
`Source/Renderer/DrawCommand.js`	每一帧的绘制命令封装
`Source/Renderer/ShaderProgram.js`	WebGL 着色器封装与管理
`Source/Scene/Scene.js`	高层场景调度器
`Source/Core/Geometry.js`	几何体数据结构与缓存上传