这门课解决什么问题
很多前端开发者在面对 3D 可视化、数字孪生或大屏交互需求时，往往因为不熟悉 WebGL 底层逻辑而无法独立承担任务。这门 Three.js 体系课正是针对这个痛点，帮你跨越从二维页面到三维场景的鸿沟。它不空谈理论，而是直接切入透视相机、顶点几何体、材质纹理、灯光阴影等核心概念，解决你在实际开发中场景搭建、模型加载、动画控制等高频问题。如果你想在简历上自信地写上具备三维开发能力，而不是停留在调用现成图表库的层面，这套资料能帮你把地基打牢。
适合什么基础与建议先看哪几块
这套资料适合已经掌握 JavaScript 基础、能看懂 ES6 语法并写过常规页面交互的上班族或转行者。如果你连基础的函数封装和事件监听都不熟练，建议先补齐前端基础再来。对于符合基础要求的读者，建议优先阅读透视相机与视椎体部分，理解三维空间中物体如何投影到屏幕；接着看 BufferGeometry 顶点生成模块，这是控制 3D 物体形态的底层逻辑；然后直接进入材质颜色与纹理贴图章节，弄懂 UV 坐标如何映射到模型表面。这三个板块啃下来，你对 Three.js 的渲染管线就有了基本认知，后续的灯光阴影和外部模型加载会顺畅很多。
学完能独立做什么与资料怎么配合练习
跟着这套资料走完，你能独立完成几类具体工作：搭建带纹理和灯光的三维场景、加载外部 GLTF 模型并控制其动画、实现射线点击选中物体的交互功能、用顶点生成规律性几何体如山脉地形或隧道效果。这些能力组合起来，足以应对企业展厅、产品三维展示、数据可视化大屏中的 3D 模块开发。在练习方式上，建议不要只看不动，每读完一个概念就用 dat.gui 调试工具动手改参数，观察相机角度、灯光强度、材质颜色变化对场景的实际影响。资料中包含的盖房子、隧道穿梭等实战内容，是最好的练手素材，先照着实现一遍，再尝试替换模型或调整参数，看能否独立排查报错。遇到顶点法线和反射原理这类偏底层的内容，结合 Helper 辅助工具可视化调试，比单纯看文字描述效率高得多。
掌握 Three.js、WebGL、Cesium.js，让 3D 变成你自信写在简历上的技能
课程目录
* 开篇词
* 实战列表
* 第一个 3D 场景
* dat.gui 可视化调试
* 深入理解透视相机和视椎体
* BufferGeometry：顶点生成各种几何体
* 点模型、线模型、网格模型
* 实战：随机山脉地形
* 材质颜色和纹理贴图
* uv 坐标和 uv 动画
* 如何画各种曲线
* 按照规律生成各种几何体
* 实战：隧道穿梭
* uv 动画实战：无限时空隧道
* 实战：盖房子（一）
* 实战：盖房子（二）
* 场景遍历和世界坐标
* 各种灯光和常用 Helper（一）
* 各种灯光和常用 Helper（二）
* 顶点法线和反射原理
* 自定义顶点颜色实现渐变
* 如何加载外部模型
* GLTF 的三种文件结构
* 正投影相机和三种灯光的阴影
* 射线与点击选中 3D 场景物体
* 后期处理与描边发光效果
* 精灵模型 Sprite 和下雨下雪效果
* 实战：林海雪原
* 实战：林海雪原（二）
* 几何体材质共用和 clone、copy
* 补间动画库 Tween.js
* 关键帧动画和模型动画播放
* 实战：丝滑入场动画
* 改变顶点的变形动画
* 骨骼动画：关节带动顶点运动
* CSS2DRenderer 实现标注：给 3D 物体加标签
* CSS3D 实现信息标注
* 实战：双人斗舞
* clock 时钟
* 粒子效果实现原理
* 实战：模型打碎重组
* 各种有趣的后期通道
* blender 实战：画一个凳子的 3D 模型
* Renderer 选项
* vue、react 项目如何集成 three.js
* blender 基础操作
* PBR 材质实现喷漆效果
* PBR 的原理
* 实战：沙滩汽车
* 实战：点亮灯笼
* 实战：舞厅
* 实战：井字游戏
* 实战：展馆漫游
* 物理引擎 cannon.js
* 实战：小球碰撞
* 实战: 老太太过马路（一）
* 实战：老太太过马路（二）
* 实战：老太太过马路（三）
* 实战：老太太过马路（四）
* 实战：老太太过马路（五）
* 玩家视角和漫游视角
* 实战：玩家漫游
* webgl 基础
* webgl 基础（二）
* webgl 基础（三）
* webgpu 快速入门（一）
* webgpu 快速入门（二）
* webgpu 快速入门（三）
* GPU 渲染管线
* shader 快速入门
* shader 快速入门（二）
* shader 快速入门（三）
* GIS 与 cesium
* 快速掌握 cesium（一）
* 快速掌握 cesium（二）
* 快速掌握 cesium（三）
* 快速掌握 cesium（四）
* 快速掌握 cesium（五）
* cesium 实战项目（一）
* cesium 实战项目（二）
* cesium 实战项目（三）
* 综合实战：汽车展厅（一）
* 综合实战：汽车展厅（二）
* 综合实战：汽车展厅（三）
* 综合实战：汽车展厅（四）
* 综合实战：汽车展厅（五）
* 综合实战：小米 su7 效果
* 综合实战：小米 su7 效果（二）
* 综合实战：跳一跳小游戏（一）
* 综合实战：跳一跳小游戏（二）
* 综合实战：跳一跳小游戏（三）
* 综合实战：跳一跳小游戏（四）
* 综合实战：跳一跳小游戏（五）
* 综合实战：VR 全景看房（一）
* 综合实战：VR 全景看房（二）
* 综合实战：VR 全景看房（三）
* 综合实战：VR 全景看房（四）
* 综合实战：VR 全景看房（五）
* 综合实战：3D 画廊（一）
* 综合实战：3D 画廊（二）
* 综合实战：3D 画廊（三）
* 综合实战：3D 画廊（四）
* 综合实战：3D 画廊（五）
* 综合实战：星系 3D 科普网站（一）
* 综合实战：星系 3D 科普网站（二）
* 综合实战：星系 3D 科普网站（三）
* 综合实战：星系 3D 科普网站（四）
* 综合实战：星系 3D 科普网站（五）
* 综合实战：飞行游戏（一）
* 综合实战：飞行游戏（二）
* 综合实战：飞行游戏（三）
* 综合实战：飞行游戏（四）
* 综合实战：飞行游戏（五）
* 综合实战：地图可视化（一）
* 综合实战：地图可视化（二）
* 综合实战：地图可视化（三）
* 综合实战：地图可视化（四）
* 综合实战：地图可视化（五）
* 综合实战：射击游戏（一）
* 综合实战：射击游戏（二）
* 综合实战：射击游戏（三）
* 综合实战：射击游戏（四）
* 综合实战：射击游戏（五）
* 综合实战：冒险家与迷宫（一）
* 综合实战：冒险家与迷宫（二）
* 综合实战：冒险家与迷宫（三）
* 综合实战：冒险家与迷宫（四）
* 综合实战：冒险家与迷宫（五）
* 综合实战：冒险家与迷宫（六）
* 综合实战：方块叠上叠
* 综合实战：方块叠上叠（二）
* 综合实战：方块叠上叠（三）
* 综合实战：警察抓小偷（一）
* 综合实战：警察抓小偷（二）
* 综合实战：警察抓小偷（三）
* 综合实战：警察抓小偷（四）
* 综合实战：警察抓小偷（五）
* 综合实战：警察抓小偷（六）
* 综合实战：小区可视化（一）
* 综合实战：小区可视化（二）
* 综合实战：小区可视化（三）
* 综合实战：小区可视化（四）
* 综合实战：小区可视化（五）
* 综合实战：小区可视化（六）
* 小册总结
