mars3d入门环境配置部署踩坑

最新推荐文章于 2024-05-08 13:51:50 发布

木纸呢

最新推荐文章于 2024-05-08 13:51:50 发布

阅读量1.3k

点赞数 1

文章标签： 3d vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44757213/article/details/126136660

版权

1. 使用npm安装依赖库

//安装mars3d主库
npm install mars3d --save

//安装mars3d插件（按需安装）
npm install mars3d-space --save

//安装copy-webpack-plugin(!本插件在第3步中使用，根据webpack版本安装，不匹配的版本可能出错，这一步比较玄学，如果报错80%在这里)
npm install copy-webpack-plugin --save-dev

2.在main.js全局导入或者在使用mars3d的文件中导入（这一步可以跳过，极简地球只需要导入mars3d主库即可，其他需要时使用）

//引入cesium基础库
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "mars3d-cesium";

//导入mars3d主库
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";

//导入mars3d插件（按需使用，需要先npm install）
import "mars3d-space";

3.在vue.config.js 添加配置

//webpack也是需要导入的，
const webpack = require('webpack')
//导入copy-webpack-plugin插件
const CopyWebpackPlugin = require('copy-webpack-plugin')

// 在module.exports中添加下列配置
configureWebpack: (config) => {
    const cesiumSourcePath = 'node_modules/mars3d-cesium/Build/Cesium/' // cesium库安装目录
    const cesiumRunPath = './mars3d-cesium/' // cesium运行时路径

    const plugins = [
      // 标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath))
      }),
      // Cesium相关资源目录需要拷贝到系统目录下面（部分CopyWebpackPlugin版本的语法可能需要patterns，代码在最下面）
      new CopyWebpackPlugin([
        { from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') },
          { from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') },
          { from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') },
          { from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }
      ])
    ]

    return {
      module: { unknownContextCritical: false }, // 配置加载的模块类型，cesium时必须配置
      plugins: plugins
    }
  }

//如果出错请替换上面的代码
// new CopyWebpackPlugin({
//   patterns: [
//     { from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') },
//     { from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') },
//     { from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') },
//     { from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }
//   ]
// })

4. 在vue2中创建一个极简地球

<template>
  <div id="mars3d-container"></div>
</template>

<script>
// 使用免费开源版本
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";

export default {
  name: "mars3dViewer",
  mounted() {
    this.initMars3d();
  },
  methods: {
    initMars3d(mapOptions) {
      // 创建三维地球场景
      const map = new mars3d.Map("mars3d-container");
    }
  },
};
</script>