Introduction

This course takes you from zero to shipping real 3D web experiences. You'll cover the core building blocks first: scenes, meshes, materials, textures, and more. Then you'll learn how to create your own 3D models in Blender and import them into your Three.js projects. Finally, you'll explore shaders and React Three Fiber to create interactive and dynamic 3D web applications.

• Foundations. Scenes, meshes, materials, textures, and animation.
• 3D modeling. Build and import custom models with Blender.
• Shaders. Unlock the full power of WebGL with GLSL.
• React Three Fiber. Integrate Three.js seamlessly into React apps.

Developers comfortable with JavaScript and React but new to 3D on the web. No prior Three.js or WebGL experience is required.

Every lesson includes a step-by-step guide so you can follow along with complete code examples for each lesson. Go at your own pace — one or two lessons a day is plenty. The brain learns best when it has time to breathe.

Stuck? Join the Discord community — there's a channel for every lesson and students ready to help.

WebGL is a browser API for drawing triangles onto a canvas using the visitor's graphics processing unit (GPU). It's supported in essentially every modern browser, and it's fast specifically because it hands the work off to the GPU instead of the CPU. WebGL can technically draw flat, 2D content too, but this course sticks to what it's best known for: 3D.

A GPU is built to do one kind of thing extremely well: the same calculation, repeated thousands of times, in parallel. Say you're rendering a model made of 1,000 triangles — modest, as 3D models go. Each triangle has 3 points, so that's 3,000 points whose position the GPU needs to work out. Because it can process all of them at once rather than one at a time, it gets through that instantly.

Once the points are positioned, the GPU still has to color in every visible pixel inside those triangles — again, all at once. The instructions for both steps, placing points and coloring pixels, are written in small GPU programs called shaders, and shaders have a reputation for being genuinely difficult to write well.

Shaders also need data fed into them: matrices describing how a model is transformed and how the camera is positioned, plus whatever's needed to light a surface correctly — a triangle facing a light should read brighter than one facing away from it. Stacking all of that up is why drawing a single triangle in raw WebGL can take upwards of 100 lines of code, before you've added perspective, lighting, or animation. The tradeoff is that WebGL sits close to the GPU, which is exactly what makes it so fast and so controllable.

Three.js is an MIT-licensed JavaScript library that sits directly on top of WebGL. Its entire purpose is to take everything described above — shaders, matrices, the whole low-level setup — and wrap it in an API simple enough that you can have an animated 3D scene running in a handful of lines.

Because Three.js is a layer over WebGL rather than a replacement for it, the door back down stays open. Later in this course, you'll write your own shaders and work with matrices directly when Three.js's defaults aren't enough — you're trading away busywork, not control.

Three.js was created by Ricardo Cabello, better known online as Mr.doob, who still actively maintains it alongside a large open-source community. The library ships a new release roughly every month, and the full history of contributions and changes is public on GitHub.

Three.js is the most widely used WebGL library, and for solid reasons: it's stable, feature-complete, well documented, actively maintained, and still close enough to WebGL that you aren't fighting it when you need to drop to a lower level. That combination is why this course is built around it.

It isn't the only option, though. Other libraries take different tradeoffs — some lean more heavily into a game-engine-style workflow, others focus on 2D rendering. If you run across one that looks interesting, it's worth a look. Plenty of ideas carry over regardless of which library you end up using day to day.