在nuxt中集成mars3d

创建一个nuxt项目

创建一个项目,安装依赖

安装mars3d ,安装mars3d-cesium

替换app.vue

html 复制代码
<template>
  <div id="mars3dContainer" class="mars3d-container"></div>
  <!-- <div>123</div> -->
</template>

<script>
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import "mars3d-cesium";

import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";

export default {
  mounted() {
    // 创建Mars3D地球实例
    const map = new mars3d.Map("mars3dContainer", {
      // 配置项,如底图、中心点等
      basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
      center: { lng: 116.397428, lat: 39.90923, alt: 1181 },
    });
  },
};
</script>

<style>
.mars3d-container {
  width: 100%;
  height: 100vh; /* 或其他固定高度 */
}
</style>

替换nuxt.config.ts文件

html 复制代码
// https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({
  ssr: false,
  compatibilityDate: "2024-04-03",
  devtools: { enabled: false },
  app: {
    head: {
      script: [
        {
          //must match the nitro config below for where the files are being served publicly
          children: `window.CESIUM_BASE_URL='_nuxt/Cesium';`,
        },
      ],
    },
  },
  nitro: {
    publicAssets: [
      {
        baseURL: "_nuxt/Cesium/Assets",
        dir: "../node_modules/mars3d-cesium/Build/Cesium/Assets",
      },
      {
        baseURL: "_nuxt/Cesium/Workers",
        dir: "../node_modules/mars3d-cesium/Build/Cesium/Workers",
      },
      {
        baseURL: "_nuxt/Cesium/ThirdParty",
        dir: "../node_modules/mars3d-cesium/Build/Cesium/ThirdParty",
      },
      {
        baseURL: "_nuxt/Cesium/Widgets",
        dir: "../node_modules/mars3d-cesium/Build/Cesium/Widgets",
      },
    ],
  },
});

成功

参考连接

https://community.cesium.com/t/using-cesium-npm-package-with-nuxt-3/29593/3

相关推荐
gis分享者14 小时前
学习threejs,使用自定义GLSL 着色器,生成漂流的3D能量球
3d·threejs·着色器·glsl·shadermaterial·能量球
m0_7431064614 小时前
【论文笔记】BlockGaussian:巧妙解决大规模场景重建中的伪影问题
论文阅读·计算机视觉·3d·aigc·几何学
向宇it19 小时前
【unity小技巧】在 Unity 中将 2D 精灵添加到 3D 游戏中,并实现阴影投射效果,实现类《八分旅人》《饥荒》等等的2.5D游戏效果
游戏·3d·unity·编辑器·游戏引擎·材质
荔枝味啊~2 天前
相机位姿估计
人工智能·计算机视觉·3d
在下胡三汉2 天前
什么是 3D 文件?
3d
点云登山者3 天前
登山第二十六梯:单目3D检测一切——一只眼看世界
3d·3d检测·检测一切·单目3d检测
xhload3d3 天前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
小赖同学啊3 天前
光伏园区3d系统管理
前端·javascript·3d
SDUERPANG4 天前
三维目标检测|Iou3D 代码解读一
人工智能·目标检测·3d
妙为5 天前
osg加入实时光照SilverLining 天空和3D 云
3d