从零开始：Three.js 3D地图开发全流程解析

1. 从零开始：为什么选择Three.js做3D地图？

如果你对3D地图感兴趣，想自己动手做一个能旋转、缩放、甚至能交互的酷炫地图，但又觉得Unity、Unreal这些引擎太重，学习曲线太陡，那么Three.js绝对是你的不二之选。我刚开始接触3D可视化的时候，也走过不少弯路，后来发现Three.js这个基于WebGL的JavaScript库，简直是前端开发者的福音。它把复杂的底层图形API封装得相当友好，让你能用写网页的思维去构建3D世界。

简单来说，Three.js就是一个在浏览器里画3D画的工具包。你想啊，传统的2D地图，比如百度地图、高德地图的API，虽然功能强大，但样式和交互深度上总感觉被框住了。而Three.js给了你一块无限大的3D画布，地图的每一个省份可以做成有厚度的立体块，可以打上不同颜色的光，鼠标移上去还能高亮显示详细信息。这种自由度和表现力，是传统2D地图难以企及的。

我最初想做一个数据可视化的项目，需要展示全国各省的某些指标，用平面的柱状图总觉得不够“带感”。后来看到一些大屏上的3D中国地图，效果非常震撼，就决定自己搞一个。从完全不懂Three.js，到最终做出一个可以流畅交互的3D地图，这个过程踩了不少坑，但也积累了很多实战经验。这篇文章，我就把这些经验掰开揉碎了讲给你听，保证你跟着步骤一步步来，也能从零做出属于自己的3D地图。

那么，用Three.js做3D地图到底需要什么呢？核心就三块：数据、几何体和材质。数据决定了地图的形状（比如中国的轮廓），几何体决定了这个形状是平的还是立体的，材质则决定了它看起来是什么颜色、什么质感。听起来是不是有点像捏橡皮泥？数据就是图纸，几何体就是橡皮泥的胚子，材质就是给胚子上色。我们后面要做的所有工作，都是围绕这三者展开的。

2. 搭建你的第一个Three.js 3D场景

万事开头难，但Three.js的开头真的不难。我们先别想复杂的地图，就从在网页上显示一个旋转的立方体开始。这个过程能帮你快速理解Three.js最核心的五个概念：场景（Scene）、相机（Camera）、渲染器（Renderer）、物体（Mesh）和动画循环。这就像拍电影：你需要一个舞台（场景），一台摄像机（相机），一个负责拍摄的摄影师（渲染器），几个演员（物体），然后让摄像机不停地拍（动画循环）。

2.1 环境搭建与基础项目结构

首先，你得有一个能写代码的地方。我强烈建议使用现代的前端开发环境，比如Vite + Vue/React，或者直接用CodeSandbox、StackBlitz这类在线编辑器起步，能省去很多配置麻烦。这里我以Vite + Vue项目为例，因为原始文章代码也是基于Vue的，这样对照起来更直观。

打开终端，创建一个新项目：

npm create vite@latest my-3d-map -- --template vue
cd my-3d-map
npm install

然后，安装Three.js核心库：

npm install three

现在，你的package.json里应该就有了three的依赖。接下来，我们清空src/App.vue，开始写我们的第一个3D程序。别怕，代码量很少，我们一行行来理解。

2.2 理解核心五步：创建一个旋转的立方体

我们直接上代码，这是理解Three.js运作原理最快的方式。在App.vue的<script setup>部分，写入以下内容：

import * as THREE from 'three';
import { onMounted } from 'vue';

const width = window.innerWidth;
const height = window.innerHeight;

// 1. 创建场景（Scene） - 相当于布置一个3D舞台
const scene = new THREE.Scene();
scene.background = new THREE.Color('#f0f0f0'); // 给舞台一个浅灰色背景

// 2. 创建相机（Camera） - 相当于设置一台摄像机
// 这里用的是透视相机（PerspectiveCamera），模拟人眼视角，近大远小
const camera = new THREE.PerspectiveCamera(
  75, // 视野角度（FOV），单位是度，越大看到的范围越广
  width / height, // 相机的长宽比，通常设为画布的长宽比
  0.1, // 近截面（near），比这个距离近的物体不会被渲染
  1000 // 远截面（far），比这个距离远的物体不会被渲染
);
camera.position.z = 5; // 把摄像机往后挪5个单位，不然离物体太近

// 3. 创建渲染器（Renderer） - 相当于摄影师和放映机
const renderer = new THREE.WebGLRenderer({ antialias: true }); // 开启抗锯齿，让边缘更平滑
renderer.setSize(width, height); // 设置渲染输出的尺寸
renderer.setPixelRatio(window.devicePixelRatio); // 设置像素比，适配高清屏

// 4. 创建物体（Mesh） - 相当于制作一个演员