在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

相关推荐
xhload3d7 小时前
智慧钢厂高炉冶炼仿真分析 | 图扑数字孪生
3d·智慧城市·html5·webgl·数字孪生·可视化·热力图·智慧工厂·工业互联网·工业组态·高炉炼铁·数字工厂·高炉炉体·智慧高炉·高炉
lrh302515 小时前
Custom SRP 12 - HDR
3d·unity·srp·render pipeline
开发游戏的老王1 天前
虚幻引擎虚拟制片入门教程 之 3D渲染基础知识:模型、材质、贴图、UV等
3d·虚幻·材质·模型·着色器·uv
Kingsdesigner1 天前
从AI画稿到3D虚拟时装:Illustrator与Substance 3D的服装设计工作流
人工智能·3d·illustrator·substance 3d·sampler·stager·数字时尚
程序猿阿伟1 天前
《3D动作游戏受击反馈:从模板化硬直到沉浸式打击感的开发拆解》
前端·网络·3d
Bar_artist1 天前
AI 颠覆室内设计:SpatialGen 实现 “一句话生成 3D 房间”
人工智能·3d
CG_MAGIC1 天前
3D 云渲染:不止于高效,更是创作的革新之力
3d·3dmax·渲云渲染
2501_933360721 天前
覆盖动画 / 工业 / 科研!Rhino 7:专业 3D 建模的全能解决方案,新手也能上手
数学建模·3d
m0_743106461 天前
【VGGT-X】:尝试将VGGT用到3DGS重建中去
人工智能·算法·计算机视觉·3d·几何学
杀生丸学AI1 天前
【三维重建】即插即用的3DGS的PDE优化:高质量渲染和重建
人工智能·3d·大模型·aigc·3dgs·高斯泼溅·空间智能