[threejs-journey] three.js之旅 | threejs journey

该课程是完整的，但初学者可以访问。我们将首先了解WebGL是什么以及为什么必须使用Three.js库。然后我们将发现 Three.js 的各种组件，一旦掌握了基础知识，我们将继续使用更先进的技术来显示数百万个粒子、添加物理、添加交互、创建星系、为汹涌的大海设置动画等等。

在课程结束时，您将对 Three.js 有深入的了解，并有足够的经验开始自己的项目。

作为奖励，我们还将学习如何使用 3D 软件Blender来创建我们自己的模型。

01 基础知识

创建您的第一个场景并了解相机、几何、材料、纹理等基础知识。
添加一个调试面板来调整您的环境并为所有内容设置动画。

介绍
什么是 WebGL 以及为什么使用 Three.js
基本场景
webpack
变换对象
动画
相机
全屏和调整大小
几何形状
调试界面
纹理
材料
3D文字
上线

02 经典技术用各种灯光照亮您的场景，开始练习环境创建并创建数百万个粒子

灯
阴影
鬼屋
粒子
银河发电机
光线施法者
基于滚动的动画

03 先进技术
将物理添加到您的世界中，以便物体开始碰撞和绊倒。然后导入你自己用 Blender 制作的模型，让它看起来尽可能逼真。

物理
引入模型
使用Blender的自定义模型
逼真的渲染
大型项目的代码结构

04 着色器

使用 Three.js 材料很棒，但创建自己的材料更好。

学习着色器语言以释放 WebGL 的真正力量并创造令人惊叹的体验！

着色器
着色器模式
汹涌的大海
动画银河
改性材料

05 额外的

如果大多数计算机都无法运行它，那么创建一个很酷的 WebGL 体验是没有用的。
了解如何监控和优化性能以实现最佳帧速率。

后期处理
性能提示
介绍和加载进度条
混入HTML和WebGL
在Blender中创建场景
烘培和导出场景
导入和优化场景
为场景添加细节

2022/11/13 更新react three fiber

2022/12/2 补全12章节materials 缺少的图片和视频

2022/12/5 文字版12章节后面的忘记上传了补全了下

2023/03/01 作者更新了Shaders部分从54节更新到67节

2023/03/02 33、36、37、41、43、44 视频源更换为1920*1080

Chapter 01 Basics

01. Introduction
35:24

02. What is WebGL and why use Three.js
23:56

03. First Three.js Project
01:19:27

04. Transform objects
46:12

05. Animations
30:26

06. Cameras
57:55

07. Fullscreen and resizing
30:41

08. Geometries
35:00

09. Debug UI
48:17

10. Textures
01:14:57

11. Materials
01:21:19

12. 3D Text
44:29

13. Go live
24:29

Chapter 02

Classic techniques

14. Lights
42:02

15. Shadows
01:00:44

16. Haunted House
01:15:48

17. Particles
49:51

18. Galaxy Generator
01:08:47

19. Scroll based animation
01:23:01

Chapter 03 Advanced techniques

20. Physics
01:57:38

21. Imported models
01:07:37

22. Raycaster and Mouse Events
01:07:31

23. Custom models with Blender
01:59:45

24. Environment map
01:49:33

25. Realistic render
01:12:21

26. Code structuring for bigger projects
03:19:40

Chapter 04 Shaders

27. Shaders
02:17:57

28. Shader patterns
01:49:25

29. Raging sea
01:15:33

30. Animated galaxy
01:14:11

31. Modified materials
51:55

32. Coffee Smoke
01:25:07 new

33. Hologram
01:21:18 new

34. Fireworks
01:47:28 new

35. Lights Shading
01:17:09 new

36. Raging Sea Shading
57:02 new

37. Halftone Shading
56:04 new

38. Earth
01:40:43 new

39. Particles Cursor Animation
01:48:08 new

40. Particles Morphing
01:35:12 new

41. GPGPU Flow Field Particles
02:22:59 new

42. Wobbly Sphere
01:16:27 new

43. Sliced Model
01:03:59 new

44. Procedural Terrain
01:24:18 new

Chapter 05 Extra

45. Post-processing
01:36:39

46. Performance tips
01:12:24

47. Intro and loading progress
49:54

48. Mixing HTML and WebGL
58:07

Chapter 06 Portal Scene

49. Creating a scene in Blender
02:04:52

50. Baking and exporting the scene
02:11:58

51. Importing and optimizing the scene
46:55

52. Adding details to the scene
01:34:51

Chapter 07 React Three Fiber

53. What are React and React Three Fiber
25:50

54. First React Application
04:23:01

55. First R3F Application
02:05:24

56. Drei
01:14:15

57. Debug
51:44

58. Environment and Staging
02:02:06

59. Load models
01:29:57

60. 3D Text
59:13

61. Portal Scene
41:54

62. Mouse Events
47:15

63. Post-processing
01:53:21

64. Fun and Simple Portfolio
51:20

65. Physics
02:11:34

66. Create a game
04:01:51

67. The end
03:50

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

菲菲统一解压密码：

[threejs-journey] three.js之旅 | threejs journey

three.js之旅

threejs journey

学习 Three.js的最佳方式

你会学到什么？

Chapter 01

Basics

Chapter 03

Advanced techniques

Chapter 04

Shaders

Chapter 05

Extra

Chapter 06

Portal Scene

Chapter 07

React Three Fiber

发表回复取消回复

评论(2)

关于我们

IT教程

设计

微信群

QQ群