Three.js Journey

This repository contains the exercises completed as part of the Three.js Journey course by Bruno Simon.

Chapter 01 - Basics

1. Introduction
2. What is WebGL and why use Three.js
3. First Three.js Project
4. Transform Objects
5. Animations
6. Cameras
7. Fullscreen and Resizing
8. Geometries
9. Debug UI
10. Textures
11. Materials
12. 3D Text
13. Go Live

Chapter 02 - Classic Techniques

14. Lights
15. Shadows
16. Haunted House
17. Particles
18. Galaxy Generator
19. Scroll Based Animation

Chapter 03 - Advanced Techniques

20. Physics
21. Imported Models
22. Raycaster and Mouse Events
23. Custom Models with Blender
24. Environment Map
25. Realistic Render
26. Code Structuring for Bigger Projects

Chapter 04 - Shaders

27. Shaders
28. Shader Patterns
29. Raging Sea
30. Animated Galaxy
31. Modified Materials
32. Coffee Smoke
33. Hologram
34. Fireworks
35. Lights Shading
36. Raging Sea Shading
37. Halftone Shading
38. Earth
39. Particles cursor animation
40. Particles morphing
41. GPGPU Flow Field Particles
42. Wobbly Sphere
43. Sliced Model
44. Procedural Terrain

Chapter 05 - Extra

45. Post-processing
46. Performance Tips
47. Intro and loading progress
48. Mixing HTML and WebGL

Chapter 06 - Portal Scene

49. Creating a scene in Blender
50. Baking and exporting the scene
51. Importing and optimizing the scene
52. Adding details to the scene

Chapter 07 - React Three Fiber

53. What are React and React Three Fiber
54. First React Application
55. First R3F Application
56. Drei
57. Debug
58. Environment and Staging
59. TBD

---

Setup

Each lesson is developed in a separate branch.

1. Create a new branch using the kebab-case format, for example 01-first-lesson.

2. Checkout to the new branch

3. Unzip the starter provided in the course lesson

4. Run the following command:

   npm i && npm i prettier --save-dev && npm pkg set scripts.format="prettier --write ." && npm run format

   • Installs all the lesson dependencies
   • Adds prettier as a development dependency
   • Adds a format script to the package.json file
   • Runs the format script to automatically format the project files with prettier

Deploy

Each push to a branch initiates a deployment to a separate Vercel project for every lesson.

Each lesson will be available live at dammafra.<branch-name>.vercel.app.

Go to the Vercel Dashboard