这门课解决什么工作场景

Web3D 开发在当前的前端岗位中，已经从“加分项”逐渐变成某些垂直领域的“必选项”。比如电商平台的 3D 商品展示、数据可视化的大屏交互、建筑或工业产品的线上预览、以及轻量级的网页游戏。这些场景如果只用 DOM 和 CSS 硬写，性能差且维护成本高；而直接用原生 WebGL 又因为底层 API 过于繁琐，容易导致开发效率极低。

这门课的核心价值，在于帮你打通从“原生 WebGL 原理”到“Three.js 工程化应用”的完整链路。它不只教你怎么用现成的模型，更重要的是让你理解 3D 场景是如何在浏览器里构建起来的——包括坐标系统、渲染管线、材质光照、纹理映射以及交互事件处理。学完之后，面对需求方提出的“在网页上展示一个可旋转、可点击的 3D 产品”这类任务，你不再需要依赖外包或昂贵的商业插件，而是能够独立搭建出一个高性能、可交互的 3D 演示页面。这对于希望提升技术壁垒的前端开发者来说，是一个明显的差异化优势。

适合什么基础、建议先看哪几块

本课程定位明确，适合已经熟练掌握 JavaScript 基础语法，并了解 HTML5 Canvas 基本用法的开发者。如果你从未接触过面向对象编程（OOP）或 ES6+ 的新特性，建议先补齐前端基础，否则在学习场景图（Scene Graph）和类结构时会比较吃力。对于完全没有 3D 概念的同学，前几章的数学部分（矩阵、向量、四元数）可能会感到枯燥，但这是绕不过去的基石，务必耐心掌握。

建议的学习顺序如下：首先，重点攻克前几章关于 WebGL 底层原理的内容，理解为什么 Three.js 能简化代码，这样才能在遇到问题时具备排查能力；其次，进入 Three.js 核心章节，熟练掌握几何体、材质、光源和相机的组合用法，这是构建任何 3D 场景的基础组件；再次，深入学习动画系统和用户交互，这是让静态模型“活”起来的关键；最后，通过实战项目将知识串联，特别是学习如何加载外部模型和优化渲染性能。不要跳步直接看最终效果，基础不牢在后续处理复杂场景时会非常痛苦。

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

完成全部 18 章的学习后，你应当能够独立从零搭建一个完整的 Web3D 应用。具体能力包括：能够使用 Three.js 创建包含多种几何体和材质的 3D 场景；能够导入并渲染外部 3D 模型（如 GLTF/GLB 格式）；能够实现相机控制、鼠标点击检测、悬停高亮等基础交互；能够对场景进行简单的动画控制，如旋转、缩放、位移动画；能够针对浏览器进行性能调优，避免卡顿。

资料包的配合使用至关重要。课程中的每一个知识点都配有对应的代码示例和工程文件。在学习每一章时，不要仅仅观看视频，一定要亲手将代码敲一遍，并尝试修改参数观察效果变化。例如，在学到灯光章节时，尝试改变光源的位置、颜色和强度，观察阴影和物体表面亮度的变化；在学到交互章节时，尝试添加自己的事件监听逻辑。课后作业是检验学习效果的最佳方式，务必独立完成后再对照参考答案。此外，由于 3D 开发对环境配置有一定要求，建议在本地搭建好 Node.js 环境和必要的构建工具（如 Vite 或 Webpack），确保能够顺利运行项目，避免因环境问题打断学习思路。记住，3D 开发是一门实践性极强的技能，只有动手越多，理解才越深。

mksz622-WebGL+Three.js入门与实战，系统学习Web3D技术【完结18章】

本课程隶属 会员库 · MK实战课（一部分是老课） / 课程盒子6-mksz600至699，完整课程目录与配套资料如下。

课程目录

{10}--第10章【Threejs组件】每个组件都有其独特的使用方法，可以/
[10.1]--10-1基础组件-Scene.mp4
[10.2]--10-2基础组件-几何体.mp4
[10.3]--10-3基础组件-正射投影相机.mp4
[10.4]--10-4基础组件-透视投影相机.mp4
{11}--第11章【Threejs光源】相信光，能照亮场景的每个角落，一个/
[11.1]--11-1光源类型.mp4
[11.2]--11-2聚光灯光源.mp4
[11.3]--11-3环境光.mp4
[11.4]--11-4点光源.mp4
[11.5]--11-5平行光.mp4
[11.6]--11-6半球光.mp4
{12}--第12章【threejs材质】不同的材质能呈现出不同的效果，合适/
[12.10]--12-10联合材质.mp4
[12.1]--12-1材质简介.mp4
[12.2]--12-2基础材质.mp4
[12.3]--12-3深度材质.mp4
[12.4]--12-4法向材质.mp4
[12.5]--12-5面材质.mp4
[12.6]--12-6郎伯材质.mp4
[12.7]--12-7Phong材质.mp4
[12.8]--12-8着色器材质.mp4
{13}--第13章【Threejs几何体】还在为物体坐标烦恼吗？内置几何体/
[13.10]--13-10多面体.mp4
[13.11]--13-11文字.mp4
[13.1]--13-1几何体简介.mp4
[13.2]--13-2二维平面.mp4
[13.3]--13-3二维圆.mp4
[13.4]--13-4自定义二维图形.mp4
[13.5]--13-5立方体.mp4
[13.6]--13-6球体.mp4
[13.7]--13-7圆柱体.mp4
[13.8]--13-8圆环.mp4
[13.9]--13-9纽结.mp4
{14}--第14章【Threejs动画和相机】不同的角度看到的景色是不一样/
[14.1]--14-1基础动画.mp4
[14.3]--14-3点击选取对象.mp4
[14.4]--14-4加载外部文件.mp4
[14.5]--14-5使用相机控件.mp4
[14.6]--14-6实战：实现骨骼动画.mp4
{15}--第15章【Threejs纹理】场景不再单一，丰富多了/
[15.1]--15-1基础纹理.mp4
[15.2]--15-2凹凸贴图.mp4
[15.3]--15-3法向贴图.mp4
[15.4]--15-4环境贴图.mp4
[15.5]--15-5canvas贴图.mp4
[15.6]--15-6实战：实现辉光效果.mp4
{16}--第16章【Threejs粒子】舞动的精灵，你值得拥有/
[16.1]--16-1粒子和粒子系统.mp4
[16.2]--16-2使用粒子实现水波效果.mp4
[16.3]--16-3粒子组合成立方体.mp4
{17}--第17章【智慧城市实战】基础内容怎么样了？来实战一下吧/
[17.10]--17-10添加场景扫描线.mp4
[17.11]--17-11特效：雷达效果.mp4
[17.12]--17-12特效：透明墙.mp4
[17.13]--17-13特效：地面扩散.mp4
[17.14]--17-14特效：扩散半球.mp4
[17.15]--17-15特效：旋转四棱锥.mp4
[17.16]--17-16特效：飞线.mp4
[17.17]--17-17特效：路径移动.mp4
[17.18]--17-18场景文字添加.mp4
[17.19]--17-19天气：冬雪.mp4
[17.1]--17-1blender基础使用.mp4
[17.20]--17-20天气：夏雨.mp4
[17.21]--17-21跟随鼠标缩放.mp4
[17.23]--17-23烟雾预警.mp4
[17.2]--17-2通过blender创建城市模型.mp4
[17.3]--17-3创建项目及场景添加.mp4
[17.4]--17-4加载城市模型.mp4
[17.5]--17-5背景天空盒.mp4
[17.6]--17-6添加交互效果.mp4
[17.7]--17-7给建筑物添加渐变色.mp4
[17.8]--17-8创建建筑物外围线条.mp4
[17.9]--17-9添加建筑物扫描线.mp4
{18}--第18章番外篇：webgl里的数学/
[18.10]--18-10番外10旋转矩阵.mp4
[18.1]--18-1番外1三角函数.mp4
[18.2]--18-2番外2向量乘以标量.mp4
[18.3]--18-3番外3向量长度计算.mp4
[18.4]--18-4番外4两个向量的距离.mp4
[18.5]--18-5番外5归一化.mp4
[18.6]--18-6番外6点积.mp4
[18.7]--18-7番外7叉积.mp4
[18.8]--18-8番外8向量运算.mp4
[18.9]--18-9番外9矩阵运算.mp4
{1}--第1章课程开篇/
[1.1]--1-1课程导学.mp4
[1.2]--1-2课程简介.mp4
{2}--第2章WebGL简单应用：学习WebGL简单使用，建立WebGL/
[2.1]--2-1canvas和webgl的区别.mp4
[2.2]--2-2认识webgl，了解webgl.mp4
[2.3]--2-3webgl入门-给画布换个颜色.mp4
[2.4]--2-4绘制一个点.mp4
[2.5]--2-5介绍webgl三维坐标系.mp4
[2.6]--2-6学习使用attribute变量-绘制一个水平移动的点.mp4
[2.7]--2-7通过鼠标控制绘制.mp4
[2.8]--2-8使用uniform变量-绘制不同颜色的点.mp4
{3}--第3章WebGL多图形绘制和动画/
[3.10]--3-10图形复合变换-矩阵组合.mp4
[3.1]--3-1使用缓冲区对象-绘制多个点.mp4
[3.2]--3-2多缓冲区和数据偏移.mp4
[3.3]--3-3实现多种图形绘制.mp4
[3.4]--3-4图形平移-着色器.mp4
[3.5]--3-5图形缩放-着色器.mp4
[3.6]--3-6图形旋转-着色器.mp4
[3.7]--3-7图形平移-平移矩阵.mp4
[3.8]--3-8图形缩放-缩放矩阵.mp4
[3.9]--3-9图形旋转-旋转矩阵.mp4
{4}--第4章WebGL颜色和纹理/
[4.1]--4-1使用varying变量-绘制彩色三角形.mp4
[4.2]--4-2从顶点到图形–webgl渲染流程介绍.mp4
[4.3]--4-3给图形添加背景图.mp4
[4.4]--4-4使用多重纹理.mp4
{5}--第5章WebGL原理学习：OpenGLES语言/
[5.1]--5-1OpenGLES语言基础.mp4
[5.2]--5-2矢量和矩阵.mp4
[5.3]--5-3纹理取样器.mp4
[5.4]--5-4分支和循环.mp4
[5.5]--5-5函数.mp4
[5.6]--5-6内置函数介绍.mp4
[5.7]--5-7存储限定词.mp4
{6}--第6章WebGL三维世界/
[6.1]--6-13D基础.mp4
[6.2]--6-2正射投影.mp4
[6.3]--6-3透视投影.mp4
[6.4]--6-4立方体绘制（顶点法）.mp4
[6.5]--6-5立方体绘制（索引法）.mp4
{7}--第7章webgl光照/
[7.1]--7-1光是如何使用的.mp4
[7.2]--7-2给场景添加光源.mp4
{8}--第8章WebGL进阶操作/
[8.1]--8-1雾化.mp4
[8.2]--8-2绘制圆形的点.mp4
[8.3]--8-3绘制半透明物体.mp4
{9}--第9章【Threejs基础】简单实现一些阴影、雾化的效果/
[9.1]--9-1什么是threejs.mp4
[9.2]--9-2渲染三维对象.mp4
[9.4]--9-4添加阴影效果.mp4
[9.5]--9-5添加雾化效果.mp4
课件.zip