Mark3D | 用 Mars3D 实现一个炫酷的三维地图

jingling5552025-12-19 8:10

理解Mark3D的基本概念

Mark3D是一种结合标记语言与3D建模的技术，通常用于简化3D内容的创建和交互。核心包括标记语法、3D坐标系、基本几何体定义等。需明确其与传统3D建模工具（如Blender）的区别，突出轻量化和易用性。

安装与环境配置

分类	名称	下载
开发环境	Node	下载
IDE编程工具	VS Code	下载
Web服务器	nginx	下载
浏览器	Chrome	下载

创建项目

使用最简单的 HTML 方式快速启动：

1.创建index.html

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>mars3d</title>
    <!--引入cesium基础lib-->
    <link href="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
    <script src="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Cesium.js" type="text/javascript"></script>

    <!--引入mars3d库lib-->
    <link href="https://registry.npmmirror.com/mars3d/latest/files/mars3d.css" rel="stylesheet" type="text/css" />
    <script src="https://registry.npmmirror.com/mars3d/latest/files/mars3d.js" type="text/javascript"></script>
    <style>
      html,
      body,
      .mars3d-container {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="mars3dContainer" class="mars3d-container"></div>
    <script type="text/javascript">
      const map = new mars3d.Map("mars3dContainer", {
        basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }]
      })
    </script>
  </body>
</html>

2. 通过本地服务器运行（关键！）

⚠️ 切勿直接双击打开！需用 HTTP 服务，否则会报 Refused to cross-origin redirects 错误。

复制代码

在vscode里面安装Live Server

点击它打开：

Mark3D | 用 Mars3D 实现一个炫酷的三维地图

理解Mark3D的基本概念

安装与环境配置

创建项目

1.创建index.html

2. 通过本地服务器运行（关键！）

实现效果