Threejs3D炫酷地图

如何用THREE.js打造炫酷的地图板块

项目场景：

通过三维建模技术实现一个炫酷的城市地图的展示

---

# 场景制作流程 章节目录

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

通过threeJS来制作一个简单炫酷的3D地图板块

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、ThreeJs是什么？

Three.js是一个web端基于WebGL封装的一个3D渲染工具，便于开发者更加简易的在Web端搭建3D场景。

二、使用步骤

1.搭建模型（建模方法）

首先通过建模软件如Maya、3DMax、blender、C4D等、根据地图形状绘制一个模型平面

这里我用的建模软件是maya,别的建模软件同理，（注意模型得处理成3角面，不然导入可能会有发生形变等相关问题）；
其次处理好模型的UV(关于UV这块我就不做细致讲解了[内容太多了])什么是UV，可以简单了解一下，如果有兴趣的可以去学一下建模的UV
然后还得根据地图模型上的线自行创建一个管道

这个工作一班交给建模师来做就可以了，不过不能和地图结合成一个mesh,可以把管道单独的作为一个mesh,地图单独作为一个mesh,管道因为效果是纯色就不用拆分UV了。
基本上这样的一个模型差不多就完成了。
加上贴图后的效果就是这样的

但是到这边可能很多人不懂边缘的渐变怎么来的，别急看下一段

2.模型边缘渐变处理

这边提供一个思路
就如刚刚上图所讲使用模型来制作

我们把模型地图边缘的这块区域单独提取出来，进行一个简单的UV拆分

这个UV不用拆的特别规范化（不建议这么学习，主要是应付这种项目随便拆分的UV），但是模型的上边缘得和下图对应

在这里我做了一个简单的渐变色的贴图，将他贴在模型的边缘上

如果想要可以自己变色的那种渐变色需求，可以拆分完UV之后使用CanvasTexture来自己绘制相对应的贴图，实时更新canvas即可

代码方面

模型制作完成之后，通过相应模型格式的加载器，这里我用blender转换成了gltf的格式导入了场景中
导入场景后的模型是没有太多炫酷的效果的，没有泛光，可以使用ThreeJS的后期通道BloomBloomPass+OutlinePass实现边缘线条闪烁；或者直接使用UnrealBloomPass来实现发光效果

最终效果

---

总结

本章节主要讲的是主要是通过模型方面的一些修改来实现一个炫酷的地图场景的，建议：制作3D场景不单单是纯代码方面，有时候结合模型的效果会更好，有时候也可以多多去了解一下建模方面。