01

Basic

Create your first scene and understand fundamentals like cameras, geometries, materials, textures. Add a debug panel to tweak your environment and animate everything.

• 03 Basics
• 05 Transform Objects
• 06 Animations
• 07 Camera
• 08 Fullscreen and Rotation
• 09 Geometries
• 10 Debug UI
• 11 Textures
• 12 Materials
• 13 3D Text

02

Classic Techniques

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

• 15 Lights
• 16 Shadows
• 17 Haunted House
• 18 Particles
• 19 Galaxy Generator
• 20 Raycaster
• 21 Scroll Based Animations

03

Advance 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.

• 22 Physics
• 23 Imported Modules
• 24 Custom model w/ Blender
• 25 Realistic Render
• 26 Code Structuring for Bigger Projects

04

Shaders

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!

• 27 Shaders
• 28 Shader Patterns
• 29 Raging Sea
• 30 Animated Galaxy
• 31 Modified Materials

05

Extra

Once you know shaders, it's the opportunity 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.

• 32 Post Processing
• 33 Performance Tips
• 34 Intro and Loading Progress
• 35 Mixing HTML & WebGL

06

Portal Scene

Learn how to create a cool scene using Blender and discover the baking technique to get the best looking lights and shadows.

07

React Three Fibre

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.

• 42 First R3F Application
• 43 Drei
• 44 Debug
• 45 Environment & Staging
• 46 Load Models
• 47 3D Text
• 49 Mouse Events
• 50 Post Processing
• 52 Physics w/ R3F