凯子哥

后端开发

课程简介

Three.js 是前端开发中构建三维视觉体验的核心工具，本课程聚焦于利用 WebGL 在浏览器端渲染交互式 3D 场景。它解决的核心问题是：如何在无需编写底层着色器代码和复杂矩阵运算的前提下，快速搭建具备光照、材质、几何体及动画逻辑的 3D 界面。对于希望丰富 Web 应用视觉表现、制作数据可视化大屏或开发网页游戏原型的开发者而言，这门课提供了从场景初始…

已有 0 人浏览发布 2026-10-08 更新 2026-10-07

适合的基础门槛在于扎实的 JavaScript ES6 模块能力与基础的 HTML/CSS 布局知识。你不需要精通计算机图形学理论，但必须理解 DOM 事件、数组与对象操作，因为 Three.js 的对象模型完全基于 JavaScript 类继承体系。建议优先关注课程中关于“渲染管线”与“场景图”的章节，这是理解所有 3D 逻辑的基石。其次，深入研读“几何体与材质”部分，掌握如何加载模型文件（如 glTF 格式）并应用纹理，这是连接静态资产与动态交互的关键环节。最后，重点练习“相机与控制器”模块，理解透视相机与正交相机的差异，以及 OrbitControls 等辅助类的接入方式，这直接决定了用户体验的流畅度。

学完本课程后，你将能够独立构建带有交互逻辑的 3D 产品展示页、动态数据可视化图表或简单的第一人称/第三人称视角网页小游戏。你具备的能力包括：初始化 WebGL 上下文、构建复杂场景图、实现自定义 Shader 的封装调用、优化渲染性能以适配移动端设备，以及处理 3D 对象间的碰撞与物理模拟。这种能力可复用于任何需要嵌入 3D 视图的前端项目，如电商配置器、建筑 BIM 展示或在线虚拟展厅。

在实践配合上，不要仅停留在观看代码演示。每完成一个章节，立即在本地项目中复刻案例。建议建立三个独立的项目目录：第一个用于基础场景搭建与动画循环测试；第二个用于引入外部模型资源并实现光照调试；第三个用于整合用户输入事件与 3D 对象状态的同步逻辑。通过这种分阶段拆解练习，将抽象的 3D 坐标系统与具体的 UI 交互解耦，确保你能在不需要查阅文档的情况下，独立调试相机视角偏移、材质反射异常或性能卡顿等常见问题。这种“边写边调”的工程化练习，远比单纯记忆 API 参数更为有效，能真正将 Three.js 转化为你的生产力工具。

课程介绍

Three.js 是一个 3D JavaScript 库，它可以帮助你为网络创造3D体验，而且非常容易使用。如果你想让你的网站更加炫酷，那么 Three.js 一定是你的好帮手。 Three.js 是一个在 MIT 许可下的 JavaScript 库，它在 WebGL 之上运行。这个库的目标就是简化处理3D内容的过程。只需要几行代码，你就可以获得一个动画3D场景，而且你无需了解复杂的着色器和矩阵。

课程目录

THREE.png (120.07 KB, 下载次数: 0) 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