先判断这门课值不值得学

如果你日常在做前端开发，或者正准备转行切入前端岗，大概率会遇到这类需求：在网页里做一个可旋转的产品展示、搭一个简单的三维场景、或者给数据加一点立体可视化效果。很多同学的处理方式是直接去抄现成的开源代码，改改参数凑合上线，遇到性能瓶颈或视角错乱就彻底卡壳。这门课解决的就是这个痛点。它不带你搞炫酷的影视级大片，而是把 Three.js 在实际业务里最常用的那部分能力拆开讲清楚，帮你从“能跑通别人代码”过渡到“自己能写、能调、能排查问题”。如果你手头的工作根本不涉及网页端三维呈现，只是图个新鲜，那不建议碰，学完没场景用很快就会忘。

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

这套资料的门槛很明确：你得有基本的前端开发底子，能顺畅写 HTML、CSS 和 JavaScript，最好接触过 React。完全零基础的小白直接看核心模块会一头雾水。开始正式啃代码前，建议先过一遍学前预备部分，把本地开发环境跑通，确认能在自己电脑上把基础页面渲染出来，再往下走。进入正课后，优先精读基础概念那几节，特别是网格模型、相机模型和渲染器。这三个部分是 Three.js 的地基，后面所有的复杂动画和场景适配，本质都是在调这三者的参数。千万别跳过这几节直接去搞复杂的运动逻辑，否则遇到模型不显示、视角不对时，你连基础的排查方向都找不到。

学完能独立做什么与资料怎么配合练

踏踏实实跟着这套资料走完，你能独立完成网页端三维场景的搭建：从加载几何体、配置光照和感光材质，到控制相机视角、编写基础动画，再到做屏幕自适应处理，整个链路都能自己摸清。资料里的每个模块都配有对应的代码示例，正确的用法是把视频里的逻辑听懂后，关掉教程，只看着自己的编辑器，尝试把那个场景复现出来。卡住了再去翻资料里的代码片段找原因，而不是照抄一遍运行成功就当学过了。另外，资料里保留了直播答疑的记录，建议在学完基础概念和相机控制后去听一听，里面集中回答了初学者在实际敲代码时最容易踩的坑，配合自己的练习进度去听，比干看理论吸收得快得多。


01 【00.学前预备】001.前言 · 02 【00.学前预备】002.用HTML开发 · 03 【00.学前预备】003.用react开发 · 04 【01

课程目录

*   01 【00.学前预备】001.前言

*   02 【00.学前预备】002.用HTML开发

*   03 【00.学前预备】003.用react开发

*   04 【01.基础概念】004.网格模型

*   05 【01.基础概念】005.相机模型

*   06 【01.基础概念】006.渲染器

*   07 【01.基础概念】007.抗锯齿

*   08 【01.基础概念】008.感光材质与光照

*   09 【01.基础概念】009.几何体解析

*   10 【01.基础概念】010.动画

*   11 【01.基础概念】011.物体运动

*   12 【01.基础概念】012.屏幕自适应

*   13 直播答疑_20230507

*   14 【02.相机Camera】013.相机视角与观测

*   15 【02.相机Camera】014.dat.gui调试3D对象

*   16 【02.相机Camera】015.dat.gui调试透视相机

*   17 【02.相机Camera】016.包围盒与视锥体

*   18 【02.相机Camera】017.相机漫游

*   19 【02.相机Camera】018.相机控制器

*   20 【02.相机Camera】019.多相机同步渲染

*   21 【03.几何体Geometry】020.了解几何体

*   22 【03.几何体Geometry】021.几何体属性与动画库

*   23 【03.几何体Geometry】022.造个小车

*   24 【04.纹理Texture】023.什么是纹理

*   25 【04.纹理Texture】024.加载纹理

*   26 【04.纹理Texture】025.应用纹理

*   27 【04.纹理Texture】026.纹理显示算法

*   28 【04.纹理Texture】027.AO贴图

*   29 【04.纹理Texture】028.凹凸贴图

*   30 【04.纹理Texture】029.位移贴图

*   31 【04.纹理Texture】030.法线贴图

*   32 【04.纹理Texture】031.光滑度贴图

*   33 【04.纹理Texture】032.金属贴图

*   34 【04.纹理Texture】033.环境贴图

*   35 【04.纹理Texture】034.高光贴图

*   36 【04.纹理Texture】035.纹理属性

*   37 【04.纹理Texture】036.纹理资源网站

*   38 直播答疑_20230528

*   39 【05.材质Material】037.什么是材质

*   40 【05.材质Material】038.基础材质

*   41 【05.材质Material】039.Lambert材质

*   42 【05.材质Material】040.网帽网格材质

*   43 【05.材质Material】041.深度网格材质

*   44 【05.材质Material】042.Pong网格材质

*   45 【05.材质Material】043.卡通风格材质

*   46 【05.材质Material】044.法线材质

*   47 【05.材质Material】045.标准网格材质

*   48 【05.材质Material】046.物理网格材质

*   49 【05.材质Material】047.360度全景贴图

*   50 【05.材质Material】048.阴影材质

*   51 直播答疑_20230611

*   52 【06.光与影Lights&Shadow】049.介绍光源对象

*   53 【06.光与影Lights&Shadow】050.环境光

*   54 【06.光与影Lights&Shadow】051.方向光

*   55 【06.光与影Lights&Shadow】052.半球光

*   56 【06.光与影Lights&Shadow】053.聚光灯

*   57 【06.光与影Lights&Shadow】054.面光源

*   58 【06.光与影Lights&Shadow】055.聚光灯

*   59 【07.雾Fog】056.线性雾Fog

*   60 【07.雾Fog】057.指数雾FogExp2

*   61 【08.粒子Particles】058.Sprite粒子

*   62 【08.粒子Particles】059.Points粒子

*   63 【08.粒子Particles】060.Points波纹

*   64 【08.粒子Particles】061.粒子立方体&shader

*   65 【08.粒子Particles】062.模拟下雪&shader

*   66 【08.粒子Particles】063.星空隧道&shader

*   67 直播答疑_20230716

*   68 【09.射线Raycaster】064.Raycaster射线与交互

*   69 【09.射线Raycaster】065.Raycaster碰撞检测

*   70 【09.射线Raycaster】066.Box3包围盒碰撞检测

*   71 【10.动画Animation】067.动画库gsap介绍

*   72 【10.动画Animation】068.gsap基础语法

*   73 【10.动画Animation】069.游戏场景动画(上)

*   74 【10.动画Animation】070.游戏场景动画(下)

*   75 【11.3D模型】071.3D模型基础

*   76 【11.3D模型】072.加载3D模型

*   77 【11.3D模型】073.操作3D模型

*   78 【11.3D模型】074.滚轮操作模型

*   79 【11.3D模型】075.模型纹理错位问题

*   80 【11.3D模型】076.模型帧动画

*   81 【11.3D模型】077.webworker加载模型

*   82 【11.3D模型】078.人物表情管理

*   83 【11.3D模型】079.控制模型前后左右移动

*   84 【11.3D模型】080.后期处理