sagnikghoshcr7 / Three.js

Three.js Journey

The practice of ultimate Three.js course by Bruno Simon.

Basics

Create your first scene and understand fundamentals like cameras, geometries, materials, textures.

Add a debug panel to tweak your environment and animate everything.

1. Introduction
2. What is WebGL and why using Three.js
3. Basic scene
4. Webpack
5. Transforms objects
6. Animations
7. Cameras
8. Fullscreen and resizing
9. Geometries
10. Debug UI
11. Textures
12. Materials
13. 3D Text

Classic techniques

Illuminate your scene with various lights, start practicing environment creation and create millions of particles.

14. Lights
15. Shadows
16. Haunted House
17. Particles
18. Galaxy Generator
19. Raycaster

Advanced techniques

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.

20. Physics
21. Imported models
22. Custom model with Blender
23. Realistic render

Shaders

Using Three.js materials is great but creating your owns is even better.

Learn the shader language to unleash the true power of WebGL and create stunning looking experiences!

24. Shaders
25. Shader patterns
26. Raging sea
27. Animated galaxy
28. Modified materials

Extra

Creating a cool WebGL experience is useless if most computers can’t run it.

Learn how to monitor and optimize performances to achieve the best possible frame rate.

29. Post-processing
30. Performance tips
31. Intro and loading progress
32. Mixing HTML and WebGL
33. The end