先说值不值得学

Three.js 这几年越来越常见——产品官网、数据可视化大屏、互动式产品展示，不少团队都在用。这门课的核心就一件事：让你学会在浏览器里创建和操控 3D 场景，不用深究底层 WebGL 的复杂概念，靠几行 JavaScript 就能把模型、灯光、动画搭起来。

如果你是设计师，想在作品里加入可交互的 3D 元素；如果你是前端开发，被要求给页面加点"科技感"；或者你纯粹对创意编程有兴趣——这门课能给你一条清晰的上手路径。但如果你对图形学没有任何背景，也没做过动画相关的工作，建议先从基础概念开始理解，别指望两三天就能做出惊艳的作品。

适合什么基础

课程默认你已经会基本的 HTML 和 JavaScript，理解变量、函数、DOM 操作这些概念。不需要了解 WebGL、GLSL 着色器，也不需要扎实的线性代数基础——课程会把关键的数学概念用直观的方式讲清楚，重点放在"怎么用"而不是"为什么这么算"。

如果你从来没碰过 3D，可能会在第一个场景搭建时遇到一些术语障碍，比如相机、坐标系、UV 展开这些词。建议花半小时搜一下相关概念，后面看视频会顺畅很多。如果你用过 Canvas 或者 SVG 做过动效，理解起来会更快。

建议先看哪几块

推荐按这个顺序过：先看完**环境搭建和第一个场景**那一段，把 Three.js 的基本架构（场景、相机、渲染器、物体、光源）搞清楚，这是后面所有内容的基础。然后直接进入**加载 3D 模型**的部分——这是课程最实用的章节，你会学到如何用 GLTF/GLB 格式导入模型，调整材质和灯光。

接下来可以挑一个你感兴趣的方向深入：**动画系统**或者**交互逻辑**。前者适合想做产品展示或科普动画的同学，后者适合想做成互动体验的同学。两个方向都可以独立学习，不必按顺序。

学完能独立做什么

完成课程后，你应该能够：在网页中创建一个完整的 3D 场景；导入并展示外部 3D 模型；调整灯光和材质让画面更有质感；添加基本的用户交互（点击、拖拽、滚动触发动画）。这些能力足以应对大多数商业项目中的 3D 展示需求。

需要注意的是，课程不会教你复杂的性能优化和大型场景管理。如果你的项目涉及大量模型或需要支持低端设备，建议课后补充学习 LOD、纹理压缩、实例渲染等相关技术。

资料怎么配合练习

课程配套的资料包包含几个关键素材：示例场景文件、常用 3D 模型资源、材质预设。建议每看完一节就跟着做一次，不要只看视频不动手——Three.js 是个实践型技能，代码写多了才能形成肌肉记忆。

遇到报错很正常，尤其是模型加载失败、纹理不显示这些问题。先检查资源路径是否正确，再看浏览器控制台错误信息，大部分问题都能自己排查出来。

课程目录

THREE.png (120.

07 KB,  ) 2023-12-15 10:

14 上传 课程介绍： Three.js 是一个 3D JavaScript 库，它可以帮助你为网络创造3D体验，而且非常容易使用。如果你想让你的网站更加炫酷，那么 Three.js 一定是你的好帮手。 Three.js 是一个在 MIT 许可下的 JavaScript 库，它在 WebGL 之上运行。这个库的目标就是简化处理3D内容的过程。只需要几行代码，你就可以获得一个动画3D场景，而且你无需了解复杂的着色器和矩阵。 课程目录： ├──【00.学前预备】001.前言.mp4
 42.81M ├──【00.学前预备】002.用HTML开发.mp4
 58.56M ├──【00.学前预备】003.用react开发.mp4
 14.44M ├──【01.基础概念】004.网格模型.mp4
 47.84M ├──【01.基础概念】005.相机模型.mp4
 28.27M ├──【01.基础概念】006.渲染器.mp4
 16.52M ├──【01.基础概念】007.抗锯齿.mp4
 23.43M ├──【01.基础概念】008.感光材质与光照.mp4
 18.76M ├──【01.基础概念】009.几何体解析.mp4
 31.08M ├──【01.基础概念】010.动画.mp4
 37.33M ├──【01.基础概念】011.物体运动.mp4
 36.78M ├──【01.基础概念】012.屏幕自适应.mp4
 35.68M ├──【02.相机Camera】013.相机视角与观测.mp4
 94.69M ├──【02.相机Camera】014.dat.gui调试3D对象.mp4
 101.92M ├──【02.相机Camera】015.dat.gui调试透视相机.mp4
 91.30M ├──【02.相机Camera】016.包围盒与视锥体.mp4
 57.77M ├──【02.相机Camera】017.相机漫游.mp4
 190.34M ├──【02.相机Camera】018.相机控制器.mp4
 80.43M ├──【02.相机Camera】019.多相机同步渲染.mp4
 125.95M ├──【03.几何体Geometry】020.了解几何体.mp4
 81.31M ├──【03.几何体Geometry】021.几何体属性与动画库.mp4
 94.49M ├──【03.几何体Geometry】022.造个小车.mp4
 134.93M ├──【04.纹理Texture】023.什么是纹理.mp4
 42.98M ├──【04.纹理Texture】024.加载纹理.mp4
 120.99M ├──【04.纹理Texture】025.应用纹理.mp4
 135.54M ├──【04.纹理Texture】026.纹理显示算法.mp4
 73.68M ├──【04.纹理Texture】027.AO贴图.mp4
 55.08M ├──【04.纹理Texture】028.凹凸贴图.mp4
 17.02M ├──【04.纹理Texture】029.位移贴图.mp4
 37.60M ├──【04.纹理Texture】030.法线贴图.mp4
 61.27M ├──【04.纹理Texture】031.光滑度贴图.mp4
 26.78M ├──【04.纹理Texture】032.金属贴图.mp4
 64.09M ├──【04.纹理Texture】033.环境贴图.mp4
 47.80M ├──【04.纹理Texture】034.高光贴图.mp4
 49.07M ├──【04.纹理Texture】035.纹理属性.mp4
 147.66M ├──【04.纹理Texture】036.纹理资源网站.mp4
 69.92M ├──【05.材质Material】037.什么是材质.mp4
 21.20M ├──【05.材质Material】038.基础材质.mp4
 34.31M ├──【05.材质Material】039.Lambert材质.mp4
 30.65M ├──【05.材质Material】040.网帽网格材质.mp4
 79.64M ├──【05.材质Material】041.深度网格材质.mp4
 12.57M ├──【05.材质Material】042.Pong网格材质.mp4
 27.52M ├──【05.材质Material】043.卡通风格材质.mp4
 97.71M ├──【05.材质Material】044.法线材质.mp4
 40.49M ├──【05.材质Material】045.标准网格材质.mp4
 49.27M ├──【05.材质Material】046.物理网格材质.mp4
 57.46M ├──【05.材质Material】047.360度全景贴图.mp4
 233.47M ├──【05.材质Material】048.阴影材质.mp4
 108.20M ├──【06.光与影Lights&Shadow】049.介绍光源对象.mp4
 19.33M ├──【06.光与影Lights&Shadow】050.环境光.mp4
 38.75M ├──【06.光与影Lights&Shadow】051.方向光.mp4
 110.31M ├──【06.光与影Lights&Shadow】052.半球光.mp4
 58.64M ├──【06.光与影Lights&Shadow】053.聚光灯.mp4
 121.66M ├──【06.光与影Lights&Shadow】054.面光源.mp4
 109.34M ├──【06.光与影Lights&Shadow】055.聚光灯.mp4
 271.98M ├──【07.雾Fog】056.线性雾Fog.mp4
 113.41M ├──【07.雾Fog】057.指数雾FogExp2.mp4
 103.34M ├──【08.粒子Particles】058.Sprite粒子.mp4
 45.01M ├──【08.粒子Particles】059.Points粒子.mp4
 63.11M ├──【08.粒子Particles】060.Points波纹.mp4
 186.31M ├──【08.粒子Particles】061.粒子立方体&shader.mp4
 357.15M ├──【08.粒子Particles】062.模拟下雪&shader.mp4
 151.00M ├──【08.粒子Particles】063.星空隧道&shader.mp4
 144.43M ├──【09.射线Raycaster】064.Raycaster射线与交互.mp4
 136.44M ├──【09.射线Raycaster】065.Raycaster碰撞检测.mp4
 105.51M ├──【09.射线Raycaster】066.Box3包围盒碰撞检测.mp4
 22.79M ├──【10.动画Animation】067.动画库gsap介绍.mp4
 54.44M ├──【10.动画Animation】068.gsap基础语法.mp4
 79.31M ├──【10.动画Animation】069.游戏场景动画(上).mp4
 88.21M ├──【10.动画Animation】070.游戏场景动画(下).mp4
 73.26M ├──【11.3D模型】071.3D模型基础.mp4
 88.47M ├──【11.3D模型】072.加载3D模型.mp4
 61.38M ├──【11.3D模型】073.操作3D模型.mp4
 40.40M ├──【11.3D模型】074.滚轮操作模型.mp4
 58.32M ├──【11.3D模型】075.模型纹理错位问题.mp4
 67.44M ├──【11.3D模型】076.模型帧动画.mp4
 92.32M ├──【11.3D模型】078.人物表情管理.mp4
 29.12M ├──【11.3D模型】079.控制模型前后左右移动.mp4
 58.44M ├──【11.3D模型】080.后期处理.mp4
 29.77M ├──后期处理.mp4
 111.93M ├──直播答疑_20230507.mp4
 409.84M ├──直播答疑_20230528.mp4
 170.19M └──直播答疑_20230716.mp4
 200.16M