Learn Three.Js and Shaders from scratch

Learn three.js from scratch to build 2D and 3D graphics on the web, explore lights, shadows, particles, 3D models, animation, and shader programming with glsl.

Discover how WebGL enables the GPU to render 2D and 3D graphics by processing points, lines, and triangles, and how Three.js provides a JavaScript API with ready-made shaders.

Learn how to transform Three.js objects using Object3D inheritance, adjusting mesh and camera's position, scale, and rotation with Vector3 and Euler angles, and group with Group and AxesHelper and CameraHelper.

Learn to build a basic three.js animation using a scene, mesh, camera, and renderer. Drive rotation with a clock and elapsed time to keep motion consistent across devices.

Explore how the webpack bundler replaces script-based loading of the Three.js library with a local dev server, npm dependencies, and import workflows.

Learn how mathematics underpins animation in three.js, from linear motion and elapsedTime to sin, cos, and tan patterns, and explore gsap as an external alternative for smooth, timed movements.

This lesson shows how to use the lookAt method on Object3D to make a mesh face another mesh or the mouse, using Vector3 targets and normalized cursor coordinates.

Make the canvas responsive by handling the resize event and updating the canvas size, camera aspect and projection matrix, and renderer size, then set the pixel ratio with renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)).

Explore the camera types in three.js, especially orthographic and perspective cameras. See how orthographic projection keeps object sizes constant for 2D games, with left, right, bottom, top, near, far parameters.

Import OrbitControls and attach to camera and canvas, so camera orbits a target with updates in animation loop. Adjust autoRotate, autoRotateSpeed, and enableDamping (dampingFactor) to control rotation and damping.

Explore key three.js geometries—box, plane, sphere and more—and how vertices, segments, and attributes shape 3d models. Learn to build and inspect buffer geometry with positions and custom attributes using Float32Array.

Explore textures that add detail to 3D geometry in Three.js, including color, displacement, normal, and bump maps, load them via TextureLoader, and understand UV mapping with a loading manager.

Explore common three.js materials—from basic to physically based rendering—and learn essential properties like map, color, opacity, side, visible, bump maps, displacement maps, and environment maps.

Learn to speed up debugging in three.js by using a dat.gui panel to adjust mesh position, color, and wireframe. Connect GUI changes to material properties with onChange for precise control.

Explore how different lights in Three.js affect a scene, from ambient and directional to hemisphere, point, rect area, and spot lights, including helpers and GUI controls.

Explore how three.js renders core and drop shadows to boost realism, using directional, point, or spot lights casting shadows on a plane via shadow maps.

Learn to create particle scenes from a plane geometry using PointsMaterial and the Points class, generate random vertices, animate snowfall, and render with an alpha map and camera rotation.

Cast a ray from the camera with a Three.js raycaster using normalized mouse coords to detect intersections with meshes, color first intersected mesh red, and return to white when idle.

Learn to load and render 3d models in three.js using obj, gltf, and glb formats. Use blender for prep, and loaders like OBJLoader and GLTFLoader with draco compression and animation.

Import a model and its animations with the FBX loader, then use a mixer to switch animations with keys 1 and 2. Traverse to a hair mesh to modify color.