WebGL+Three.js入门与实战【完结18章】

体系课

课程简介

这门课解决什么问题如果你想让网页里出现可交互的 3D 场景——比如产品展示、数据可视化大屏、在线看房、3D 编辑器原型——那么绕不开 WebGL 和 Three.js。直接用原生 WebGL 写一个旋转立方体都要上百行代码，而 Three.js 把它封装成了 Scene、Camera、Mesh 这样相对好理解的组件。这门课正是围绕「用 Three.js…

已有 0 人浏览发布 2026-10-03 更新 2026-10-21

这门课解决什么问题

如果你想让网页里出现可交互的 3D 场景——比如产品展示、数据可视化大屏、在线看房、3D 编辑器原型——那么绕不开 WebGL 和 Three.js。直接用原生 WebGL 写一个旋转立方体都要上百行代码，而 Three.js 把它封装成了 Scene、Camera、Mesh 这样相对好理解的组件。这门课正是围绕「用 Three.js 做出能上线的 Web3D 页面」来组织的。

它最大的特点是把镜头、光源、材质、几何体拆开讲，并且每一块都对应一个具体的视觉问题：为什么场景突然变暗？为什么物体看起来是平的？为什么相机看不到你想看的部分？这些在实际项目中几乎每天都会遇到。课程通过讲清楚每个组件的职责和参数，帮你建立调试思路，而不是只给一个能跑通的 demo。

适合什么基础

建议你至少会写 JavaScript，熟悉 ES6 的模块导入导出，了解 Canvas 的基本用法即可。不需要提前学过图形学，也不需要懂线性代数——课程里用到坐标、向量、矩阵的时候，会按 Three.js 的 API 来讲，不会推公式。但有一点要提醒：如果你对 JS 的异步、对象引用这些概念还比较模糊，建议先补一下基础，否则看到材质、纹理赋值时容易卡住。

如果你之前用过其他 3D 软件（比如 Blender、C4D）或者游戏引擎，会更容易理解场景、相机、灯光的语言体系，但这不是必须的。真正需要的是耐心：Three.js 的坑往往不在代码逻辑，而在参数组合之后产生的视觉效果，这类问题只能靠动手调参去积累经验。

先看哪几块，怎么配合练习

课程一共 18 章，核心顺序建议是：第一遍先按 1～6 章快速过一遍整体流程，知道「创建一个场景要哪几步」；然后立刻进入第 10 章组件、第 11 章光源、第 12 章材质、第 13 章几何体这几大块，它们就是 Three.js 的日常拼图。每一章里的组件都值得单独实验，尤其是相机（正射投影和透视投影的差异）、光（环境光与平行光组合的明暗关系）、材质（Phong 材质和着色器材质的取舍）。这些是后续做任何项目都要反复用的基础。

练习方法不要只听不敲。建议每看完一个小节，就在本地建一个最小页面，只放当前讲的组件，改参数并观察变化。比如看完光源类型，就把五种光都摆进去，看同一个物体在不同光下的差异；看完几何体，就试着用不同分段数生成同一个形状，看看顶点数和平滑度的关系。这个过程能帮你把「API 名词」变成「视觉记忆」。

学完能独立做什么

学完并完成课后练习后，你应该能独立实现一个完整的 Three.js 场景：包括场景搭建、相机控制、多光源布置、不同材质组合、加载外部模型，以及处理动画循环和简单的交互（如鼠标旋转、点击选中）。具体的产出可以是：一个产品的 360° 展示页、一个带 3D 柱状图的数据大屏、一个简单的室内漫游 demo，或者是某个机械设备的结构拆解演示。

更进一步，你也能看懂 Three.js 官方文档和示例代码，并且有能力把网上散落的代码片段改造成自己项目里能用的功能。这门课没有讲太深的自定义着色器，但学完材质章节后，你已经能理解着色器材质的使用前提，知道什么时候该去查 GLSL 资料，而不是对着黑屏毫无头绪。

最后补充一点：课程标题里有「实战」，但它更像「带案例的体系课」，不是项目打包课。如果你想直接学一个完整的「Three.js 3D 商城」或「大屏可视化」项目，这门课可能不够；但如果你想扎实掌握 Three.js 的核心概念，自己动手组合出想要的效果，它是足够系统的。

课程目录

WebGL+Three.js入门与实战，系统学习Web3D技术【完结18章】
{10}--第10章【Threejs组件】每个组件都有其独特的使用方法，可以
[10.1]--10-1基础组件-Scene .mp4 36.95M
[10.2]--10-2基础组件-几何体 .mp4 11.67M
[10.3]--10-3基础组件-正射投影相机 .mp4 14.70M
[10.4]--10-4基础组件-透视投影相机 .mp4 9.28M
{11}--第11章【Threejs光源】相信光，能照亮场景的每个角落，一个
[11.1]--11-1鍏夋簮绫诲瀷 .mp4 14.42M
{12}--第12章【threejs材质】不同的材质能呈现出不同的效果，合适
[12.10]--12-10鑱斿悎鏉愯川 .mp4 21.84M
[12.2]--12-2基础材质 .mp4 37.18M
[12.4]--12-4娉曞悜鏉愯川 .mp4 26.16M
[12.6]--12-6閮庝集鏉愯川 .mp4 29.13M
[12.8]--12-8鐫€鑹插櫒鏉愯川 .mp4 42.33M
{13}--第13章【Threejs几何体】还在为物体坐标烦恼吗？内置几何体
[13.2]--13-2浜岀淮骞抽潰 .mp4 128.03M
[13.4]--13-4自定义二维图形 .mp4 21.58M
{14}--第14章【Threejs动画和相机】不同的角度看到的景色是不一样
[14.1]--14-1基础动画 .mp4 5.64M
[14.3]--14-3点击选取对象 .mp4 68.04M
[14.4]--14-4加载外部文件 .mp4 36.88M
[14.5]--14-5使用相机控件 .mp4 62.24M
[14.6]--14-6实战：实现骨骼动画 .mp4 185.56M
{15}--第15章【Threejs纹理】场景不再单一，丰富多了
[15.1]--15-1基础纹理 .mp4 45.86M
[15.3]--15-3娉曞悜璐村浘 .mp4 51.24M
[15.6]--15-6实战：实现辉光效果 .mp4 109.48M
{16}--第16章【Threejs粒子】舞动的精灵，你值得拥有
[16.1]--16-1粒子和粒子系统 .mp4 55.45M
[16.2]--16-2使用粒子实现水波效果 .mp4 82.11M
[16.3]--16-3粒子组合成立方体 .mp4 108.73M
{17}--第17章【智慧城市实战】基础内容怎么样了？来实战一下吧
[17.10]--17-10添加场景扫描线 .mp4 79.38M
[17.11]--17-11特效：雷达效果 .mp4 91.55M
[17.13]--17-13特效：地面扩散 .mp4 59.40M
[17.14]--17-14特效：扩散半球 .mp4 36.36M
[17.15]--17-15特效：旋转四棱锥 .mp4 61.14M
[17.17]--17-17特效：路径移动 .mp4 26.58M
[17.18]--17-18场景文字添加 .mp4 64.20M
[17.1]--17-1blender基础使用 .mp4 26.13M
[17.21]--17-21跟随鼠标缩放 .mp4 61.14M
[17.2]--17-2通过blender创建城市模型 .mp4 63.52M
[17.3]--17-3创建项目及场景添加 .mp4 116.35M
[17.4]--17-4加载城市模型 .mp4 130.83M
[17.6]--17-6添加交互效果 .mp4 79.35M
[17.7]--17-7给建筑物添加渐变色 .mp4 75.66M
[17.8]--17-8创建建筑物外围线条 .mp4 48.64M
[17.9]--17-9添加建筑物扫描线 .mp4 60.78M
{18}--第18章番外篇：webgl里的数学
[18.10]--18-10番外10旋转矩阵 .mp4 8.47M
[18.1]--18-1番外1三角函数 .mp4 31.38M
[18.2]--18-2番外2向量乘以标量 .mp4 22.46M
[18.3]--18-3番外3向量长度计算 .mp4 9.50M
[18.4]--18-4番外4两个向量的距离 .mp4 47.63M
[18.8]--18-8番外8向量运算 .mp4 28.82M
[18.9]--18-9番外9矩阵运算 .mp4 65.16M
{1}--第1章课程开篇
[1.1]--1-1课程导学 .mp4 44.95M
[1.2]--1-2课程简介 .mp4 22.39M
{2}--第2章WebGL简单应用：学习WebGL简单使用，建立WebGL
[2.1]--2-1canvas和webgl的区别 .mp4 21.03M
[2.2]--2-2认识webgl，了解webgl .mp4 77.96M
[2.3]--2-3webgl入门-给画布换个颜色 .mp4 56.93M
[2.4]--2-4缁樺埗涓€涓偣 .mp4 226.54M
[2.5]--2-5介绍webgl三维坐标系 .mp4 63.06M
[2.6]--2-6学习使用attribute变量-绘制一个水平移动的点 .mp4 88.20M
[2.7]--2-7通过鼠标控制绘制 .mp4 95.86M
[2.8]--2-8使用uniform变量-绘制不同颜色的点 .mp4 83.41M
{3}--第3章WebGL多图形绘制和动画
[3.10]--3-10图形复合变换-矩阵组合 .mp4 78.60M
[3.1]--3-1使用缓冲区对象-绘制多个点 .mp4 88.58M
[3.2]--3-2多缓冲区和数据偏移 .mp4 49.71M
[3.3]--3-3实现多种图形绘制 .mp4 50.31M
[3.4]--3-4图形平移-着色器 .mp4 27.62M
[3.5]--3-5图形缩放-着色器 .mp4 13.16M
[3.6]--3-6图形旋转-着色器 .mp4 33.25M
[3.7]--3-7图形平移-平移矩阵 .mp4 114.36M
[3.8]--3-8图形缩放-缩放矩阵 .mp4 43.31M
[3.9]--3-9图形旋转-旋转矩阵 .mp4 91.63M
{4}--第4章WebGL颜色和纹理
[4.1]--4-1使用varying变量-绘制彩色三角形 .mp4 28.15M
[4.2]--4-2从顶点到图形–webgl渲染流程介绍 .mp4 14.95M
[4.3]--4-3给图形添加背景图 .mp4 154.77M
[4.4]--4-4使用多重纹理 .mp4 56.12M
{5}--第5章WebGL原理学习：OpenGLES语言
[5.1]--5-1OpenGLES语言基础 .mp4 47.60M
[5.4]--5-4分支和循环 .mp4 9.27M
[5.6]--5-6内置函数介绍 .mp4 15.84M
[5.7]--5-7存储限定词 .mp4 20.30M
{6}--第6章WebGL三维世界
[6.1]--6-13D基础 .mp4 136.57M
[6.2]--6-2姝ｅ皠鎶曞奖 .mp4 88.72M
[6.3]--6-3閫忚鎶曞奖 .mp4 166.86M
[6.4]--6-4立方体绘制（顶点法） .mp4 81.76M
[6.5]--6-5立方体绘制（索引法） .mp4 80.16M
{7}--第7章webgl光照
[7.1]--7-1光是如何使用的 .mp4 35.89M
[7.2]--7-2给场景添加光源 .mp4 72.04M
{8}--第8章WebGL进阶操作
[8.2]--8-2绘制圆形的点 .mp4 32.98M
[8.3]--8-3绘制半透明物体 .mp4 19.53M
{9}--第9章【Threejs基础】简单实现一些阴影、雾化的效果
[9.2]--9-2渲染三维对象 .mp4 79.19M
[9.4]--9-4添加阴影效果 .mp4 55.56M
[9.5]--9-5添加雾化效果 .mp4 24.10M
课件 .zip 22.02M
[10.1]--10-1基础组件-S.mp4