VUE3+Cesium+Three项目构建

CesiumJS是一个开源、免费的三维地图开发框架，Three.js是一个也开源、免费的三维渲染框架，两者都是基于WebGL技术、使用JavaScript开发的Web前端三维可视化框架，目前在国内外的三维Web开发中使用极为广泛。但Three.js是一个轻量级的跨浏览器JavaScript库，用于在浏览器中创建和显示动画3D计算机图形；而Cesium的可视化内容以地理空间数据为主，如卫星影像、地形、城市级三维模型等，数据量和空间范围都非常大，对数据精度要求更高，并且还具有一系列GIS相关的空间分析功能，但在模型的渲染及可视化方面略逊于Three。

因此，将Cesium的地理数据渲染和GIS功能与Three.js广泛而易用的通用3D API相结合，不仅可以优化模型的渲染精度，也可以加入许多地理信息相关的应用，为新的WebGL体验开启了许多可能性。

目录

1.Cesium+Three实现原理

2.VUE3+Cesium项目创建

3.导入Three

4.实现VUE3+Cesium+Three

5. 项目模块化源码

---

1.Cesium+Three实现原理

主要原理：两个框架分成不同的视图层，参考 HTML Canvas 元素，并将它们的控制器组合在同一个坐标系中。

可参考如下官方案例：

Integrating Cesium with Three.js – Cesiumhttps://cesium.com/blog/2017/10/23/integrating-cesium-with-threejs/

实现步骤：

1）在HTML中设置两个容器分别容纳Cesium和Three（或初始化Cesium容器后将Three容器追加到Cesium后）。

2）使Three产生的场景覆盖Cesium之上（ Three.js DOM 元素位于 Cesium 之上），并禁用Three容器的鼠标事件，通过Cesium同步控制Three。

3）并分别对Cesium渲染器和Three渲染器进行初始化，通过禁用Cesium的默认渲染循环，我们可以将其动画帧与Three.js同步。并设置Three场景的渲染器背景为透明，以达成叠加效果。

4）初始化物体并分别加入至各自的场景之中（注意 Three.js 渲染 z-up 而 Cesium 渲染 y-up。）。

5）进行坐标转换，使对象在地球上正确显示。这包括将大地纬度/经度位置转换为笛卡儿XYZ，并使用WGS84区域从左下角到左上角的方向作为向上矢量，使物体指向地球中心。这也可以通过使用本地笛卡尔东北向或东北向下来计算。

6）请求关键帧并循环渲染器。

2.VUE3+Cesium项目创建

项目创建可参考往期内容：

VUE3构建Cesium项目_HM-hhxx！的博客-CSDN博客_cesium vue3使用VUE3构建cesium项目https://blog.csdn.net/damadashen/article/details/124896474

3.导入Three

安装Three相关依赖：

npm install three --save
or
yarn add three

Three初始化可参考往期内容：

VUE3_Three项目构建（基础模板）_HM-hhxx！的博客-CSDN博客_three项目VUE3配置Three开发环境（配置glsl语法支持）及项目基础模板。https://blog.csdn.net/damadashen/article/details/126064919

4.实现VUE3+Cesium+Three

实现效果：

5. 项目模块化源码

VUE3+Cesium+Three项目源码_HM-hhxx！的博客-CSDN博客Vue+Cesium+Three项目构建的详解及源码。https://blog.csdn.net/damadashen/article/details/126585531?spm=1001.2014.3001.5501