在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

相关推荐
GISBox3 小时前
零基础教学:用GISBox将RVT转为3DTiles
3d
狗蛋儿l6 小时前
qt 3d航迹图
开发语言·qt·3d
EQ-雪梨蛋花汤7 小时前
【3D基础】深入解析OBJ与MTL文件格式:Blender导出模型示例及3D开发应用
3d·blender
在下胡三汉9 小时前
导入使用 Blender 创建的 glTF/glb 格式的 3D 模型
3d·blender
_李小白11 小时前
【OSG学习笔记】Day 7: 材质与光照——让模型“活”起来
游戏·3d·材质
暴走约伯11 小时前
【3DMax脚本MaxScript开发:创建高效模型虚拟体绑定和材质管理系统,从3DMax到Unreal和Unity引擎_系列第一篇】
3d·unity·材质·unreal·maxscript
AgilityBaby1 天前
unity Animation学习,精准控制模型动画播放
学习·3d·unity·游戏引擎
Mu先生Ai世界1 天前
AI 生成 3D 技术解析:驱动力、价值主张与核心挑战 (AI+3D 产品经理笔记 S2E01)
人工智能·游戏·3d·aigc·transformer·产品经理·vr
cnbestec1 天前
Haply MinVerse触觉3D 鼠标—沉浸式数字操作,助力 3D 设计与仿真
3d·计算机外设·haply·minverse·minverse触觉3d鼠标·前沿科技