在浏览器中构建沉浸式 3D 世界——WebGL 渲染、粒子特效、GLSL 着色器、React Three Fiber 声明式 3D
课程简介
Three.js 是基于 WebGL 的 JavaScript 3D 库，让你无需深入了解图形学底层即可在浏览器中渲染高质量 3D 场景。它是目前最流行的 Web 3D 框架，被 NASA、Apple、Google 等大量用于产品展示与数据可视化。
本教程从 Three.js 核心三要素出发，逐步深入几何体、材质、光照、动画、粒子系统，直到 GLSL 着色器编程，最后学习 React Three Fiber —— 用声明式 React 方式编写 Three.js，大幅提升开发效率。
你将学到什么
Scene / Camera / Renderer 三要素，requestAnimationFrame 渲染循环
内置几何体、PBR 材质、纹理加载、法线贴图、环境贴图
五种光源类型、shadowMap 实时阴影、3D 产品展示台实战
OrbitControls、Raycaster 点击拾取、FPS 视角、相机动画
十万粒子星空效果、Bloom 辉光、景深、胶片颗粒后处理
声明式 3D、useFrame / useThree Hook、Drei 组件库实战
前置要求
✅ 熟悉 JavaScript ES6+（箭头函数、模块导入、async/await）
✅ 安装 Node.js（v18+）和 npm / pnpm
✅ 了解基础 HTML / CSS
⚪ React 基础有帮助但不是 ch1-9 的必须条件（ch10 需要）
课程目录