• VUE3+Cesium+Three项目源码

    继上一篇Vue+Cesium+Three项目构建的详解后，为了方便使用，进一步对该项目进行模块化封装。 

    VUE3+Cesium+Three项目构建_HM-hhxx！的博客-CSDN博客VUE3+Cesium+Three项目创建及原理详解。https://blog.csdn.net/damadashen/article/details/126550168

    目录

    1.初始化Cesium：initCesium.js

    2.初始化Three：initThree.js

    3.HomeView.vue

    该版本项目中，将cesium初始化与Three初始化剥离开，在日后使用中更为便捷，并在vue

    初始化时加入router及vuex状态管理，便于后续大型项目开发使用，项目结构如下：

    1.初始化Cesium：initCesium.js

    1. import * as Cesium from "cesium";
    2. import "../Widgets/widgets.css";
    3. // 设置cesium的token
    4. Cesium.Ion.defaultAccessToken =
    5.   "your_token";
    6. // cesium默认资源路径
    7. window.CESIUM_BASE_URL = "/Cesium/";
    8. // 设置默认的视角为中国
    9. Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
    10.   // 西边经度
    11.   89.5,
    12.   // 南边维度
    13.   20.4,
    14.   // 东边经度
    15.   110.4,
    16.   // 北边维度
    17.   61.2
    18. );
    19. // 设置全局cesium对象
    20. let cesium = {
    21.   viewer: null,
    22. };
    23. function initCesium(minWGS84, maxWGS84, cesiumContainerid) {
    24.   var cesiumContainer = cesiumContainerid;
    25.   // 设置cesium容器
    26.   var cesiumContainer = document.getElementById("cesiumContainer");
    27.   // 初始化cesium渲染器
    28.   cesium.viewer = new Cesium.Viewer(cesiumContainer, {
    29.     useDefaultRenderLoop: false,
    30.     selectionIndicator: false,
    31.     homeButton: false,
    32.     infoBox: false,
    33.     sceneModePicker: false,
    34.     navigationHelpButton: false,
    35.     animation: false,
    36.     timeline: false,
    37.     fullscreenButton: false,
    38.     baseLayerPicker: false,
    39.     clock: false,
    40.     geocoder: false,
    41.     //     天地图矢量路径图
    42.     imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
    43.       url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=30d07720fa76f07732d83c748bb84211",
    44.       layer: "tdtBasicLayer",
    45.       style: "default",
    46.       format: "image/jpeg",
    47.       tileMatrixSetID: "GoogleMapsCompatible",
    48.     }),
    49.     //cesium中webgl选项
    50.     contextOptions: {
    51.       webgl: {
    52.         //透明度
    53.         alpha: false,
    54.         // 抗锯齿
    55.         antialias: true,
    56.         //深度检测
    57.         depth: true,
    58.       },
    59.     },
    60.   });
    61.   //设置隐藏logo
    62.   cesium.viewer.cesiumWidget.creditContainer.style.display = "none";
    63.   // 设置抗锯齿
    64.   cesium.viewer.scene.postProcessStages.fxaa.enabled = true;
    65.   // 地图叠加
    66.   var imageryLayers = cesium.viewer.imageryLayers;
    67.   //console.log(imageryLayers);
    68.   var layer = imageryLayers.addImageryProvider(
    69.     new Cesium.WebMapTileServiceImageryProvider({
    70.       url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=30d07720fa76f07732d83c748bb84211",
    71.       layer: "tdtBasicLayer",
    72.       style: "default",
    73.       format: "image/jpeg",
    74.       tileMatrixSetID: "GoogleMapsCompatible",
    75.     })
    76.   );
    77.   layer.alpha = 0.5;
    78.   // 设置前往地点
    79.   let center = Cesium.Cartesian3.fromDegrees(
    80.     (minWGS84[0] + maxWGS84[0]) / 2,
    81.     (minWGS84[1] + maxWGS84[1]) / 2,
    82.     20000
    83.   );
    84.  
    85.   // 设置相机飞往该区域
    86.   cesium.viewer.camera.flyTo({
    87.     destination: center,
    88.     duration: 2,
    89.     orientation: {
    90.       heading: Cesium.Math.toRadians(0),
    91.       pitch: Cesium.Math.toRadians(-90),
    92.       roll: 0,
    93.     },
    94.   });
    95. }
    96. function renderCesium() {
    97.   cesium.viewer.render();
    98. }
    99. function exportCesium() {
    100.     let cesiumdone = cesium;
    101.     return cesiumdone;
    102. }
    103. export  { exportCesium,initCesium, renderCesium };

    2.初始化Three：initThree.js

    1. import * as THREE from "three";
    2. import * as Cesium from "cesium";
    3.  
    4. // three全局对象
    5. let three = {
    6.   renderer: null,
    7.   camera: null,
    8.   scene: null,
    9. };
    10. // three.js物体
    11. let objects3D = [];
    12. //封装three物体（使three物体具有经纬度）
    13. function Object3D(mesh, minWGS84, maxWGS84) {
    14.   this.threeMesh = mesh; //物体
    15.   this.minWGS84 = minWGS84; //范围
    16.   this.maxWGS84 = maxWGS84; //范围
    17. }
    18. function initThree() {
    19.   //初始化Three
    20.   // 设置相机配置
    21.   let fov = 45; //视角
    22.   let aspect = window.innerWidth / window.innerHeight; //宽高比例
    23.   let near = 0.1;
    24.   let far = 10 * 1000 * 1000; //视域范围
    25.  
    26.   // 初始化场景
    27.   three.scene = new THREE.Scene();
    28.   three.camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    29.   three.renderer = new THREE.WebGLRenderer({
    30.     antialias: true, //抗锯齿
    31.     alpha: true,
    32.   });
    33.   // 设置渲染器大小
    34.   three.renderer.setSize(window.innerWidth, window.innerHeight);
    35.  
    36.   // 添加环境光
    37.   let ambientLight = new THREE.AmbientLight(0xffffff, 1);
    38.   three.scene.add(ambientLight);
    39.   // 添加three.jscanvas元素到cesium容器
    40.   cesiumContainer.appendChild(three.renderer.domElement);
    41. }
    42. // 创建three.js物体
    43. function createMesh(minWGS84, maxWGS84) {
    44.   let geometry = new THREE.BoxBufferGeometry(1, 1, 1);
    45.   let material = new THREE.MeshBasicMaterial({
    46.     color: 0x00ff00,
    47.   });
    48.   let mesh = new THREE.Mesh(geometry, material);
    49.  
    50.   // 放大物体
    51.   mesh.scale.set(100, 100, 100); // 放大
    52.   mesh.position.set(0, 0, 50); // 平移
    53.  
    54.   let meshGroup = new THREE.Group();
    55.   meshGroup.add(mesh);
    56.   // 添加至场景
    57.   three.scene.add(meshGroup);
    58.   // 创建3d物体
    59.   let OB3d = new Object3D(
    60.     meshGroup,
    61.     [minWGS84[0], minWGS84[1]],
    62.     [maxWGS84[0], maxWGS84[1]]
    63.   );
    64.  
    65.   // 添加到3d物体数组
    66.   objects3D.push(OB3d);
    67. }
    68.  
    69. function renderThree(cesium) {
    70.   // 设置相机跟cesium保持一致
    71.   
    72.   three.camera.fov = Cesium.Math.toDegrees(cesium.viewer.camera.frustum.fovy);
    73.   //console.log(cesium);
    74.   // 声明一个将cesium框架的cartesian3转换为three.js的vector3（笛卡尔坐标转换为三维向量）
    75.   let cartToVec = function (cart) {
    76.     return new THREE.Vector3(cart.x, cart.y, cart.z);
    77.   };
    78.   // 将3D的物体通过经纬度转换成对应的位置
    79.   objects3D.forEach((item, index) => {
    80.     // 通过经纬度获取中心点的位置
    81.     let center = Cesium.Cartesian3.fromDegrees(
    82.       (item.minWGS84[0] + item.maxWGS84[0]) / 2,
    83.       (item.minWGS84[1] + item.maxWGS84[1]) / 2
    84.     );
    85.     item.threeMesh.position.copy(cartToVec(center));
    86.  
    87.     //计算朝向（切面方向-切线向量）
    88.     //中心高度点
    89.     let centerHeight = Cesium.Cartesian3.fromDegrees(
    90.       (item.minWGS84[0] + item.maxWGS84[0]) / 2,
    91.       (item.minWGS84[1] + item.maxWGS84[1]) / 2,
    92.       1
    93.     );
    94.     //左下
    95.     let bottomLeft = cartToVec(
    96.       Cesium.Cartesian3.fromDegrees(item.minWGS84[0], item.minWGS84[1])
    97.     );
    98.     //左上
    99.     let topLeft = cartToVec(
    100.       Cesium.Cartesian3.fromDegrees(item.minWGS84[0], item.maxWGS84[1])
    101.     );
    102.     //朝向（）
    103.     let latDir = new THREE.Vector3()
    104.       .subVectors(bottomLeft, topLeft)
    105.       .normalize();
    106.  
    107.     // console.log(item);
    108.     //设置查看方向
    109.     item.threeMesh.lookAt(centerHeight.x, centerHeight.y, centerHeight.z);
    110.     //设置朝向
    111.     item.threeMesh.up.copy(latDir);
    112.   });
    113.  
    114.   //设置摄像机矩阵
    115.   // 设置相机跟cesium保持一致
    116.   three.camera.matrixAutoUpdate = false; //自动更新
    117.   //复制cesium相机矩阵
    118.   let cvm = cesium.viewer.camera.viewMatrix;
    119.   let civm = cesium.viewer.camera.inverseViewMatrix;
    120.   // three相机默认朝向0,0,0
    121.   three.camera.lookAt(0, 0, 0);
    122.  
    123.   // 设置threejs相机矩阵
    124.   three.camera.matrixWorld.set(
    125.     civm[0],
    126.     civm[4],
    127.     civm[8],
    128.     civm[12],
    129.     civm[1],
    130.     civm[5],
    131.     civm[9],
    132.     civm[13],
    133.     civm[2],
    134.     civm[6],
    135.     civm[10],
    136.     civm[14],
    137.     civm[3],
    138.     civm[7],
    139.     civm[11],
    140.     civm[15]
    141.   );
    142.  
    143.   three.camera.matrixWorldInverse.set(
    144.     cvm[0],
    145.     cvm[4],
    146.     cvm[8],
    147.     cvm[12],
    148.     cvm[1],
    149.     cvm[5],
    150.     cvm[9],
    151.     cvm[13],
    152.     cvm[2],
    153.     cvm[6],
    154.     cvm[10],
    155.     cvm[14],
    156.     cvm[3],
    157.     cvm[7],
    158.     cvm[11],
    159.     cvm[15]
    160.   );
    161.   //设置宽高比例
    162.   let width = cesiumContainer.clientWidth;
    163.   let height = cesiumContainer.clientHeight;
    164.   three.camera.aspect = width / height;
    165.   //更新相机矩阵
    166.   three.camera.updateProjectionMatrix();
    167.   //设置尺寸大小
    168.   three.renderer.setSize(width, height);
    169.   three.renderer.clear();
    170.   three.renderer.render(three.scene, three.camera);
    171. }
    172. export {initThree,createMesh,renderThree};

    3.HomeView.vue

    2.  
    3. <script setup>
    4. import { onMounted } from "vue";
    5. import * as Cesium from "cesium";
    6. //import "cesium/Build/Cesium/Widgets/widgets.css";
    7. import "../Widgets/widgets.css";
    8. import * as THREE from "three";
    9. import { exportCesium, initCesium, renderCesium } from "../cesium/cesium_init.js";
    10. import { initThree, createMesh, renderThree } from "../three/three_init.js"
    11.  
    12. onMounted(() => {
    13.   main();
    14. });
    15.  
    16. function main() {
    17.   // 设置北京显示模型的渲染范围(用于设置范围)
    18.   var minWGS84 = [115.39, 38.9];
    19.   var maxWGS84 = [117.39, 40.9];
    20.   //初始化Cesium
    21.   initCesium(minWGS84, maxWGS84, cesiumContainer);
    22.   var cesium = exportCesium();
    23.   //初始化Three
    24.   initThree(minWGS84, maxWGS84);
    25.   //创建物体
    26.   createMesh(minWGS84, maxWGS84);
    27.     //循环函数，不断请求动画帧渲染
    28.   function loop() {
    29.     requestAnimationFrame(loop);
    30.     // cesium渲染
    31.     renderCesium();
    32.     // three.js渲染
    33.     renderThree(cesium);
    34.   }
    35.   loop();
    36. }
    37. script>
    38.  
    39. <style>
    40. * {
    41.   margin: 0;
    42.   padding: 0;
    43. }
    44.  
    45. #cesiumContainer {
    46.   width: 100vw;
    47.   height: 100vh;
    48.   position: relative;
    49. }
    50.  
    51. #cesiumContainer>canvas {
    52.   position: absolute;
    53.   top: 0;
    54.   left: 0;
    55.   /* 设置鼠标事件穿透 */
    56.   pointer-events: none;
    57. }
    58. style>

    源码地址：

    GitHub - Harsh-M1/vue_cesium_three_templateContribute to Harsh-M1/vue_cesium_three_template development by creating an account on GitHub.https://github.com/Harsh-M1/vue_cesium_three_template

    或
    vue_cesium_three_template: 使用VUE3+cesium+three.js构建的基础想木模板！https://gitee.com/lei-aimiao/vue_cesium_three_template

  • 相关阅读:
    业务总结思考 | 额度授信模型/拒绝捞回模型/定义坏样本
    CFS内网穿透靶场实战
    Java错题归纳day19
    C++基础知识（十九）--- 函数对象
    【LeetCode】Day132-单词搜索
    「程序员转型技术管理」必修的 10 个能力提升方向
    手把手带你从官网下载安装 Vivado
    SpringBoot多数据源以及事务处理
    java电话本项目
    Linux创建用户及sumba服务器创建用户
  • 原文地址：https://blog.csdn.net/damadashen/article/details/126585531