Programming 3D Graphics with Three.js

In this lesson, we'll focus on camera controls. We'll start with basic camera controls to understand how to navigate and interact with the 3D environment. Next, we'll explore Orbit Controls, which allow you to orbit around a target, perfect for inspecting objects from various angles. We'll also cover Fly Controls, enabling a first-person navigation experience through the scene. Additionally, we'll learn how to work with multiple cameras using the scissor technique to display different views simultaneously.

In this lesson, we'll learn how to make your scene responsive, ensuring that your Three.js applications look great on any screen size. You'll learn how to handle window resize events and update your scene and camera parameters accordingly.

In this lesson, we'll explore various materials available in Three.js to enhance the appearance of your 3D objects. We'll start with Basic Material, which provides a simple, flat shading without lighting effects. Next, we'll examine Matcap Material, which applies a predefined texture to give objects a unique, stylized look. We'll then dive into Lambert Material, known for its non-shiny, diffuse shading that reacts to light sources. Following that, we'll cover Standard Material, which offers more complex shading with support for multiple textures and lighting effects. Finally, we'll explore Physical Material, designed for realistic rendering with advanced properties like roughness and metalness.

In this lesson, we'll about using textures to enhance your Three.js scenes. We'll start with how to import and apply image files to your 3D objects. Next, we'll explore PBR Textures (Physically Based Rendering), which are used to achieve realistic material appearances. We'll cover various types of textures, including Normal Textures, Displacement Textures, and Ambient Occlusion textures. You'll also learn about Roughness Maps and Metalness Maps to control the surface properties and reflectivity of materials. Finally, we'll discuss Cube Textures for creating environment reflections and backgrounds.

In this lesson, we'll explore various types of lighting in Three.js to illuminate your 3D scenes effectively. We'll start with Ambient Light, which provides a uniform light source that illuminates all objects equally. Next, we'll cover Directional Light, which simulates sunlight with parallel rays and casts shadows in a consistent direction. We'll then examine Point Light, which emits light in all directions from a single point. Following that, we'll dive into SpotLight, which creates a focused beam of light with a cone-shaped area. Finally, we'll discuss Shadows, including how to configure and cast shadows from different light sources.

In this lesson, we'll dive into the components of 3D models and how to work with them in Three.js. We'll start by understanding how vertices, geometries, and meshes come together to form 3D objects. Next, we'll explore different 3D model file formats to see how various formats are used for storing and sharing models. We'll then focus on loading GLTF files. You'll learn how to traverse the model graph to manipulate and access different parts of the loaded model. Finally, we'll cover Draco compression, used to reduce the size of 3D assets.

In this lesson, we'll cover the fundamentals of animation in Three.js. We'll start with animation basics, including key concepts such as frames, properties, keyframes, and timing to understand how animations are constructed. Next, we'll explore the animation loop in Three.js, which continuously updates your scene and renders animations. You'll learn about Delta Time, a crucial concept for ensuring consistent animation speed regardless of frame rate. Finally, we'll learn how sine and cosine functions creating smooth, cyclical animations like oscillations and waves.

In this lesson, we'll dive into Tweening, a technique for creating smooth transitions and animations between states in Three.js. We'll start with the basics of TweenJS, a library that simplifies the tweening process by interpolating values over time. You'll learn how to manage Multiple Tweens to animate various properties simultaneously. We'll explore different Easing Functions to control the speed of the animations. Next, we'll discuss adding a Delay to start your tweens at specific times. We'll also cover Chaining tweens to create sequences of animations and Callbacks to execute functions when tweens complete.

In this lesson, we'll explore GLTF animations, which are pre-defined animations embedded into GLTF models. We'll start with the Animation Mixer, a powerful tool for managing and playing animations within Three.js. You'll learn how to handle multiple animations. We'll also cover techniques for fading between actions, allowing smooth transitions between different animations.

In this lesson, we'll cover the fundamentals of Raycasting, which involves projecting a ray into the 3D scene to detect intersections with objects. You'll learn how Raycasting in Three.js works. We'll also explore techniques for  allowing you to pick up and move objects with user input, such as mouse events.

In this lesson, we'll learn about Buffer Geometry in Three.js. You'll learn how to access and manipulate attributes of primitive geometries, such as positions, normals, and UVs. We'll explore how to manually create buffer geometries, giving you control over the geometry's structure and data. We'll also cover the concept of Winding Order, which determines the front and back faces of your geometry, and how to use an Index Array to optimize rendering by reusing vertex data. Finally, we'll discuss Mesh Instancing, a technique for rendering multiple instances of the same geometry efficiently.

In this lesson, we'll explore how to work with text in Three.js. We'll start by preparing a TrueType font (TTF) and converting it to JSON format. You'll learn how to use the FontLoader to load this JSON font data into Three.js. We’ll then dive into TextGeometry, which enables you to generate and customize 3D text shapes based on the loaded font.

In this lesson, we'll explore Post Processing techniques in Three.js. You'll learn about the Effect Composer, a tool that allows you to apply and manage a series of post-processing effects in a flexible manner. We'll cover how to use Passes to add various effects, such as bloom, depth of field, and color correction, by chaining them together in the composer.

This lesson will introduce the core stages of the GPU's graphics pipeline. We'll learn how data flows from your code to the final rendered image, including vertex processing, rasterization, fragment shading, and more.

This lesson will focus on the ShaderMaterial in Three.js. ShaderMaterial is the way we can provide custom GLSL shaders in Three.js.

Vectors are an essential data type in GLSL. This lesson will show the different type of vectors we can create in Three.js, as well as accessing and performing mathematical operations on them.

This lesson will show some of the most common GLSL functions and their applications. We'll also discuss the difference between UV and Fragment coordinates.

This lesson will show how we can create functions in GLSL. We’ll learn about Signed Distance Functions and how we use them to draw shapes. Next, we’ll look at some of the most common SDFs as well as how to combine them with operations.

In this lesson, we’ll learn about Matrices in GLSL. We’ll start by learning how to create them and access their elements. We’ll also learn how we can use them to do transformations in like rotation, translation, and scale.

The vertex shader is the first stage of GLSL's programmable pipeline. This lesson will teach how to manipulate object vertices, apply transformations, and create dynamic deformations. We’ll also learn how to implement displacement maps.

This lesson will show how Three.js handles materials and shaders behind the scenes. The first part will show how to implement a lighting model (Phong) from scratch. Then the second part will show how we can take a built-in material and extend it with our own GLSL code.