Three.js 之旅

课程索引

共 67 节课

入门

01–13

Three.js 基础 — 场景、物体、相机、灯光以及你的第一个 3D 项目。

01 介绍 02 什么是 WebGL 以及为什么使用 Three.js 03 第一个 Three.js 项目 04 变换物体 05 动画 06 相机 07 全屏与自适应 08 几何体 09 调试 UI 10 纹理 11 材质 12 3D 文字 13 发布上线

经典技巧

14–22

阴影、粒子、物理效果、射线投射以及导入模型。

14 灯光 15 阴影 16 鬼屋 17 粒子 18 星系生成器 19 滚动动画 20 物理效果 21 导入模型 22 射线投射与鼠标事件

Blender 与真实感

23–26

在 Blender 中自定义模型、环境贴图以及真实渲染。

23 Blender 自定义模型 24 环境贴图 25 真实渲染 26 大型项目代码结构

着色器 (Shaders)

27–33

编写自定义 GLSL 着色器 — 从基础到烟雾、全息图及烟花。

27 着色器基础 28 着色器图案 29 怒海 30 动画星系 31 修改材质 32 咖啡烟雾着色器 33 全息图着色器

高级着色器

34–44

灯光、怒海、半调、地球、粒子、GPGPU 以及程序化地形。

34 烟花着色器 35 光照着色器 36 怒海着色器 37 半调着色器 38 地球着色器 39 粒子光标动画着色器 40 粒子变形着色器 41 GPGPU 流场粒子着色器 42 摇晃球体着色器 43 模型切割着色器 44 程序化地形着色器

生产技术

45–48

后期处理、性能优化、加载界面以及 HTML 与 WebGL 混合使用。

45 后期处理 46 性能优化技巧 47 简介与加载进度 48 混合 HTML 与 WebGL

Blender 场景构建

49–52

在 Blender 中创建、烘焙、导入并细化一个完整场景。

49 在 Blender 中创建场景 50 烘焙与导出场景 51 导入与优化场景 52 完善场景细节

React Three Fiber

53–67

React、R3F、Drei、物理效果、传送门、后期处理、作品集及游戏开发。

53 认识 React 与 React Three Fiber 54 第一个 React 应用 55 第一个 React Three Fiber 应用 56 R3F 与 Drei 57 调试 R3F 应用 58 R3F 环境与舞台 59 使用 R3F 加载模型 60 使用 R3F 创建 3D 文字 61 R3F 传送门场景 62 R3F 鼠标事件 63 R3F 后期处理 64 R3F 趣味作品集 65 R3F 物理效果 66 使用 R3F 开发游戏 67 完结