在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

相关推荐
VSORender_Farm1 天前
新手该选哪款软件?3ds Max vs Blender深度对比
3d·渲染·blender·云渲染·设计·建筑·效果图
渊鱼L1 天前
CAD球体密堆积_圆柱体试件3D插件 球体颗粒在圆柱容器内的堆积建模
3d
云飞云共享云桌面1 天前
昆山精密机械公司8个Solidworks共用一台服务器
运维·服务器·网络·3d·自动化·制造
咔咔一顿操作2 天前
【CSS 3D 交互】实现精美翻牌效果:从原理到实战
前端·css·3d·交互·css3
Magnum Lehar2 天前
wpf 3d游戏引擎的PrimitiveMesh.h和ToolsCommon.h
3d·游戏引擎
新启航光学频率梳3 天前
激光频率梳 3D 轮廓测量 -- 平晶干涉法观察高精度平面度
科技·3d·制造
AndrewHZ3 天前
【3D算法技术】blender中,在曲面上如何进行贴图?
算法·3d·blender·贴图·三维建模·三维重建·pcg
新启航光学频率梳3 天前
激光频率梳 3D 轮廓测量 - 油路板的凹槽深度和平面度测量
科技·3d·制造
灵犀物润3 天前
Blender来设计一个机器宠物-完整的3D建模流程
3d·blender·宠物
杀生丸学AI3 天前
【三维重建】3R-GS:优化相机位姿的3DGS最佳实践
人工智能·3d·aigc·三维重建·视觉大模型·高斯泼溅