Create your first scene and understand fundamentals like cameras, geometries, materials, textures. Add a debug panel to tweak your environment and animate everything. ( 14 lessons — 9h 38mn )
- 01 Introduction 18mn
- 02 What is WebGL and why use Three.js 23mn
- 03 Basic scene 36mn
- 04 Webpack 35mn
- 05 Transform objects 46mn
- 06 Animations 30mn
- 07 Cameras 57mn
- 08 Fullscreen and resizing 30mn
- 09 Geometries 35mn
- 10 Debug UI 38mn
- 11 Textures 1h 14mn
- 12 Materials 1h 21mn
- 13 3D Text 44mn
- 14 Go live 24mn
Illuminate your scene with various lights, start practicing environment creation and create millions of particles. ( 7 lessons — 7h 06mn )
- 15 Lights 43mn
- 16 Shadows 1h 00mn
- 17 Haunted House 1h 15mn
- 18 Particles 49mn
- 19 Galaxy Generator 1h 08mn
- 20 Raycaster 45mn
- 21 Scroll based animation 1h 23mn
Add physics to your world so that objects start to collide and stumble. Then import your own model made with Blender and make it look as realistic as possible. ( 5 lessons — 9h 44mn )
- 22 Physics 1h 57mn
- 23 Imported models 1h 07mn
- 24 Custom models with Blender 1h 59mn
- 25 Realistic render 1h 19mn
- 26 Code structuring for bigger projects 3h 19mn
Using Three.js materials is great but creating your own is even better. Learn the shader language to unleash the true power of WebGL and create stunning experiences! ( 5 lessons — 7h 27mn )
- 27 Shaders 2h 16mn
- 28 Shader patterns 1h 49mn
- 29 Raging sea 1h 15mn
- 30 Animated galaxy 1h 13mn
- 31 Modified materials 51mn
Creating a cool WebGL experience is useless if most computers can’t run it. Learn how to monitor and optimize performance to achieve the best possible frame rate. ( 9 lessons — 11h 10mn )
- 32 Post-processing 1h 26mn
- 33 Performance tips 1h 12mn
- 34 Intro and loading progress 49mn
- 35 Mixing HTML and WebGL 58mn
- 36 Creating a scene in Blender 2h 04mn
- 37 Baking and exporting the scene 2h 11mn
- 38 Importing and optimizing the scene 48mn
- 39 Adding details to the scene 1h 34mn
- 40 The end 3mn