Chapters
The Three.js Journey is a comprehensive, project-based course that guided me from the fundamentals of WebGL to advanced Three.js development. Through more than 90 hours of hands-on lessons, I gained practical experience building interactive 3D scenes, mastering shaders, and integrating React Three Fiber for modern web experiences. Below is an overview of the main topics and skills I developed throughout the journey.
Basics
During this chapter, I learned the essential foundations of WebGL and Three.js, and how to set up and control a 3D scene from scratch.
- Understanding WebGL and setting up a Three.js project
- Applying transforms and creating animations
- Working with cameras and controls
- Handling fullscreen, resizing, and responsive design
- Exploring geometries and materials
- Loading textures and adding 3D text
- Using a debug UI for real-time adjustments
- Deploying a finished Three.js scene online
Classic Techniques
In this chapter, I deepened my understanding of lighting, shadows, and particle systems, and created complete interactive scenes.
- Configuring various lights and shadow settings
- Building the Haunted House project
- Creating dynamic particle systems
- Designing a procedural galaxy generator
- Animating with scroll-based interactions
- Combining lighting, particles, and motion in cohesive scenes
Advanced Techniques
This chapter focused on bringing realism and structure to 3D projects through physics, models, and optimized architecture.
- Integrating physics simulations
- Importing and optimizing 3D models from Blender
- Using raycasting for mouse events and selection
- Applying environment maps and realistic lighting
- Creating physically-based materials
- Structuring scalable project architecture
Shaders
Here I learned to write and apply GLSL shaders to create unique visual effects and procedural materials.
- Understanding GLSL syntax and shader structure
- Writing custom vertex and fragment shaders
- Extending existing materials with shader code
- Developing visual effects such as smoke, holograms, and fireworks
- Creating particle morphing, GPGPU flow fields, and wobbly surfaces
- Designing procedural terrain and sliced model effects
Extra
This chapter covered important topics to enhance performance, visual quality, and user experience in Three.js projects.
- Applying post-processing effects
- Optimizing performance and load times
- Adding loading progress indicators
- Combining HTML and WebGL elements
Portal Scene
In this project chapter, I built a complete stylized scene integrating Blender and Three.js workflows.
- Modeling the portal scene in Blender
- Baking lighting and textures for performance
- Importing, optimizing, and enhancing the scene in Three.js
- Adding final details and effects
React Three Fiber
In the final chapter, I integrated Three.js into React using React Three Fiber (R3F) and built interactive applications.
- Mastering React and R3F fundamentals with Drei
- Setting up environment, staging, and debug tools
- Loading GLTF models and creating 3D text
- Handling mouse events and post-processing
- Building a small portfolio project and interactive game