یادگیری WebGL با Three.js از صفر تا سطح حرفه‌ای

عنوان دوره : Three.js Journey – Learn WebGL with Three.js

سطح : تمامی سطوح

زمان کل دوره : 93 ساعت

تعداد فایل ها : 67

سال آموزش : 2025

فایل تمرینی : دارد

مربی دوره : Bruno Simon

نرم افزار : –

زیرنویس انگلیسی : ندارد

فشردگی اختصاصی سافت ساز : ندارد

Three.js Journey – Learn WebGL with Three.js

93 hours of video to go from absolute beginner to advanced Three.js developer.

Three.js Journey is the most complete, yet accessible course you can find.

You will start by discovering what WebGL is and why using the Three.js library is a must. You will then discover the various components of Three.js and once the basics are acquired, you will move on to more advanced techniques and build up experience through tons of exercises.

At the end of the course, you will have enough experience and skills to create your own projects.

Basics

13 lessons — 10h 12m  of tutorial
Create your first scene and understand fundamentals like cameras, geometries, materials, textures.
Add a debug panel, animate everything and put your project online.
01
Introduction
free
35m
02
What is WebGL and why use Three.js
free
23m
03
First Three.js Project
free
1h 19m
04
Transform objects
preview
46m
05
Animations
preview
30m
06
Cameras
preview
57m
07
Fullscreen and resizing
preview
30m
08
Geometries
preview
35m
09
Debug UI
preview
48m
10
Textures
preview
1h 14m
11
Materials
preview
1h 21m
12
3D Text
preview
44m
13
Go live
free
24m

Classic techniques

6 lessons — 7h 55m  of tutorial
Illuminate your scene with various lights casting shadows, create millions of particles and animate on scroll.
14
Lights
preview
42m
15
Shadows
preview
1h 00m
16
Haunted House
free
2h 50m
17
Particles
preview
49m
18
Galaxy Generator
preview
1h 08m
19
Scroll based animation
preview
1h 23m

Advanced techniques

7 lessons — 12h 29m  of tutorial
Make your world even more realistic with physics, then import your own model made with Blender, make it look as realistic as possible and learn how to structure your code for more complex project.
20
Physics
preview
1h 57m
21
Imported models
preview
1h 07m
22
Raycaster and Mouse Events
preview
1h 07m
23
Custom models with Blender
preview
1h 59m
24
Environment map
preview
1h 44m
25
Realistic render
preview
1h 12m
26
Code structuring for bigger projects
preview
3h 19m

Shaders

18 lessons — 26h 24m  of tutorial
Using Three.js materials is great but creating your own is even better.
Master GLSL, the shaders language, to create unseen effects and learn how to enhance and improve existing materials.
27
Shaders
preview
2h 17m
28
Shader patterns
preview
1h 49m
29
Raging sea
preview
1h 15m
30
Animated galaxy
preview
1h 14m
31
Modified materials
preview
51m
32
Coffee Smoke
preview new
1h 25m
33
Hologram
preview new
1h 21m
34
Fireworks
preview new
1h 47m
35
Lights Shading
preview new
1h 17m
36
Raging Sea Shading
preview new
57m
37
Halftone Shading
preview new
56m
38
Earth
preview new
1h 40m
39
Particles Cursor Animation
preview new
1h 48m
40
Particles Morphing
preview new
1h 35m
41
GPGPU Flow Field Particles
preview new
2h 22m
42
Wobbly Sphere
preview new
1h 16m
43
Sliced Model
preview new
1h 03m
44
Procedural Terrain
preview new
1h 24m

Extra

4 lessons — 4h 37m  of tutorial
Use your shaders knowledge to go even further and try new techniques.
But it’s also important to make sure your projects are working on most devices by monitoring and optimising performance.
45
Post-processing
preview
1h 36m
46
Performance tips
preview
1h 12m
47
Intro and loading progress
preview
49m
48
Mixing HTML and WebGL
preview
58m

Portal Scene

4 lessons — 6h 38m  of tutorial
Learn how to create a cool scene using Blender and discover the baking technique to get the best looking lights and shadows.
49
Creating a scene in Blender
preview
2h 04m
50
Baking and exporting the scene
preview
2h 11m
51
Importing and optimizing the scene
preview
46m
52
Adding details to the scene
preview
1h 34m

React Three Fiber

14 lessons — 23h 59m  of tutorial
Did you know that Three.js integrates well in React?
Thanks to React Three Fiber (R3F) you can create awesome Three.js experiences in React with just a few lines of code.
53
What are React and React Three Fiber
free
25m
54
First React Application
preview
4h 23m
55
First R3F Application
preview
2h 05m
56
Drei
preview
1h 14m
57
Debug
preview
51m
58
Environment and Staging
preview
2h 02m
59
Load models
preview
1h 29m
60
3D Text
preview
59m
61
Portal Scene
preview
41m
62
Mouse Events
preview
47m
63
Post-processing
preview
1h 54m
64
Fun and Simple Portfolio
preview
51m
65
Physics
preview
2h 11m
66
Create a game