Three.js Journey

Lessons Index

67 lessons

Getting Started

01–13

The fundamentals of Three.js — scenes, objects, cameras, lights, and your first 3D projects.

01 Introduction 02 What is WebGL and why use Three.js 03 First Three.js Project 04 Transform objects 05 Animations 06 Cameras 07 Fullscreen and resizing 08 Geometries 09 Debug UI 10 Textures 11 Materials 12 3D Text 13 Go live

Classic Techniques

14–22

Shadows, particles, physics, raycasting, and working with imported models.

14 Lights 15 Shadows 16 Haunted House 17 Particles 18 Galaxy Generator 19 Scroll based animation 20 Physics 21 Imported models 22 Raycaster and Mouse Events

Blender & Realism

23–26

Custom models in Blender, environment maps, and realistic rendering.

23 Custom models with Blender 24 Environment map 25 Realistic render 26 Code structuring for bigger projects

Shaders

27–33

Writing custom GLSL shaders — from basics to smoke, holograms, and fireworks.

27 Shaders 28 Shader patterns 29 Raging sea 30 Animated galaxy 31 Modified materials 32 Coffee Smoke Shader 33 Hologram Shader

Advanced Shaders

34–44

Lighting, raging seas, halftone, earth, particles, GPGPU, and procedural terrain.

34 Fireworks Shaders 35 Lights Shading Shaders 36 Raging Sea Shading Shaders 37 Halftone Shading Shaders 38 Earth shaders 39 Particles Cursor Animation Shader 40 Particles Morphing Shader 41 GPGPU Flow Field Particles Shaders 42 Wobbly Sphere Shader 43 Sliced Model Shader 44 Procedural Terrain Shader

Production Techniques

45–48

Post-processing, performance, loading screens, and mixing HTML with WebGL.

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

Blender Scene Building

49–52

Creating, baking, importing, and detailing a full scene in Blender.

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

React Three Fiber

53–67

React, R3F, Drei, physics, portals, post-processing, portfolios, and games.

53 What are React and React Three Fiber 54 First React Application 55 First React Three Fiber Application 56 R3F and Drei 57 Debug a R3F application 58 Environment and Staging with R3F 59 Load models with R3F 60 3D Text with R3F 61 Portal Scene with R3F 62 Mouse Events with R3F 63 Post-processing with R3F 64 Fun and Simple Portfolio with R3F 65 Physics with R3F 66 Create a game with R3F 67 The end