Vue3 中实现 3D 地图——基于 Three.js 的实战教程

在现代 Web 开发中，3D 地图成为了展示数据和地理信息的一种新颖方式。借助 Three.js 和 Vue3，我们可以快速搭建一个 3D 地图应用。本教程将带你逐步实现 Vue3 与 Three.js 的集成，并构建一个简单的 3D 地图场景。

一、项目准备

1. 初始化 Vue3 项目

首先，创建一个 Vue3 项目。使用 Vue CLI 来快速初始化项目：

vue create vue-3d-map
cd vue-3d-map

2. 安装 Three.js 依赖

在项目中安装 Three.js：

npm install three

3. 项目结构概览

我们的项目结构大致如下：

vue-3d-map
│
├── public
│   ├── index.html
│
├── src
│   ├── components
│   │   └── Map3D.vue
│   ├── App.vue
│   └── main.js
│
└── package.json

二、创建 Map3D 组件

在 src/components/ 目录下创建 Map3D.vue 组件，作为我们 3D 地图的核心组件。

<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script>
import * as THREE from 'three';

export default {
  name: "Map3D",
  mounted() {
    this.initScene();
  },
  methods: {
    initScene() {
      // 创建场景
      this.scene = new THREE.Scene();

      // 设置相机
      const width = this.$refs.mapContainer.clientWidth;
      const height = this.$refs.mapContainer.clientHeight;
      this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
      this.camera.position.set(0, 10, 30);

      // 创建渲染器
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(width, height);
      this.$refs.mapContainer.appendChild(this.renderer.domElement);

      // 创建光源
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      this.scene.add(ambientLight);

      const pointLight = new THREE.PointLight(0xffffff, 1);
      pointLight.position.set(10, 20, 10);
      this.scene.add(pointLight);

      // 创建地图基础立方体
      this.createBaseCube();

      // 渲染场景
      this.renderScene();
    },
    createBaseCube() {
      const geometry = new THREE.BoxGeometry(10, 1, 10);
      const material = new THREE.MeshStandardMaterial({ color: 0x4CAF50 });
      const cube = new THREE.Mesh(geometry, material);
      this.scene.add(cube);
    },
    renderScene() {
      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.renderScene);
    }
  }
};
</script>

<style>
.map-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>

代码解析

• 初始化场景：我们使用 THREE.Scene() 创建一个 Three.js 场景，并配置相机 PerspectiveCamera。
• 创建光源：添加环境光 AmbientLight 和点光源 PointLight，使得物体更加清晰。
• 创建基础立方体：用 BoxGeometry 创建一个立方体来模拟地图的底层。
• 渲染循环：通过 requestAnimationFrame 实现持续渲染。

三、在主页面中引入 3D 地图

在 App.vue 中引入 Map3D 组件：

<template>
  <div id="app">
    <Map3D />
  </div>
</template>

<script>
import Map3D from './components/Map3D.vue';

export default {
  name: 'App',
  components: {
    Map3D
  }
};
</script>

运行项目

启动项目，应该可以看到一个简单的 3D 地图场景：

npm run serve

四、丰富地图元素

现在，我们可以添加更多的地图元素，如山峰、水体等，以模拟真实地理环境。

1. 添加地形（平面网格）

在 createBaseCube 函数中，加入一个简单的平面网格：

createBaseCube() {