这门课解决什么问题

很多前端开发者在面对大屏数据看板需求时，常卡在地图呈现这一环。传统方案用 ECharts 拼凑，虽然能快速出图，但遇到定制化交互、多图层叠加或需要立体视效时就会受限。这门课聚焦用 Three.js 从零搭建三维可视化地图，解决的是把地理 GeoJson 数据转化为可交互三维场景的问题。它不教基础图形学理论，而是直接针对智慧城市、数据大屏这类业务场景，演示如何解析区域坐标、生成三维版块、并叠加飞鸟漫游、光晕、天空盒等氛围效果，让页面摆脱平面图表的廉价感。

适合什么基础与建议学习顺序

资料适合有 JavaScript 基础且写过简单网页前端，但对三维引擎只停留在听说过或跑过 Demo 阶段的人。如果你连变量作用域都不熟，建议先补基础再看。开始学时，建议先重点看初始化场景和解析 GeoJson 绘制地图这两块，这是整个项目的地基，弄懂坐标系转换和网格生成逻辑比急着加特效重要。之后再看材质渐变和天空、飞鸟等效果实现，理解这些是给主场景做视觉修饰，属于锦上添花。不要按文件顺序从头到尾当视频看，务必开着编辑器同步敲代码。

学完能做什么与资料怎么用

跟着练完，你能独立做出一个带立体地图版块、动态飞行路径和氛围光效的三维大屏主体。以后接到区域数据展示需求，不必再死改图表库配置，能自行用三维引擎渲染地市数据。使用这份资料时，切忌只看不练。视频里讲的参数和 API 调用，一定要在自己本地工程里复现。遇到跑不通的特效，先查自身引擎版本差异。建议先跑通基础场景和地图加载，确认数据能正常渲染到屏幕上，再逐步往里加光晕和飞鸟等动画。每加一个效果就保存一个版本，方便出问题时回退排查。


你将对Threejs打造一个3D可视化地图有一个深刻的理解和认识，可以学习到更多效果开发

课程目录

*   01 导语/

  *   01 导语.mp4 (24.81 MB), 03:54

*   02 初始化Threejs基础场景/

  *   01 初始化Threejs基础场景.mp4 (159.76 MB), 25:16

*   03 超真实度假天空效果/

  *   01 Sky超真实天空场景创建.mp4 (104.25 MB), 16:28

  *   02 光晕效果实现.mp4 (57.48 MB), 08:59

*   04 解析GeoJson数据加载广东省地图/

  *   01 解析Geojson数据绘制地图.mp4 (143.70 MB), 22:21

*   05 地图材质渐变效果/

  *   01 地图材质渐变效果.mp4 (76.97 MB), 12:01

*   06 飞鸟路径漫游式飞翔/

  *   01 加载飞鸟并运行飞鸟动画.mp4 (83.03 MB), 12:59

  *   02 初始化场景点击和地图点击效果切换.mp4 (75.69 MB), 11:56

  *   03 飞鸟路径漫游式飞翔.mp4 (150.82 MB), 23:52

*   07 彩色文字加载及上下动画/

  *   01 加载彩色文字并一直面向当前视角的效果.mp4 (136.37 MB), 21:13

  *   02 点击地图加载城市名&文字上下浮动的动画效果.mp4 (50.26 MB), 07:55

*   08 统计柱动态生长以及渐变效果/

  *   01 统计柱动态生长以及渐变效果.mp4 (111.88 MB), 16:51

*   09 动态飞线效果/

  *   01 动态飞线效果.mp4 (118.40 MB), 18:16

*   10 地图轮廓飞线拖尾效果/

  *   01 地图轮廓飞线拖尾效果.mp4 (128.15 MB), 19:38

*   11 场景炫酷扩展波效果/

  *   01 场景炫酷扩展波效果.mp4 (120.43 MB), 18:15

*   12 地图热力点扩展效果/

  *   01 地图热力点扩展效果.mp4 (107.61 MB), 16:30

*   13 上升多彩粒子效果/

  *   01 上升多彩粒子效果.mp4 (89.59 MB), 13:40

*   14 终章/

  *   01 终章.mp4 (23.81 MB), 03:43