Three.js — Complete Guide

Three.js Basics Explained — Complete Beginner's Guide to Scene, Camera & Renderer

Learn Three.js from scratch: what Three.js is, how scene-camera-renderer works, CDN setup, creating 3D objects, animation loops, and responsive design — with runnable examples.

Three.js Geometries & Materials Explained — Complete Guide to Shapes, PBR & Textures

Master Three.js geometries and materials: all built-in shapes (box, sphere, torus, custom BufferGeometry), material types (Basic, Standard, Physical, Toon), textures, UV mapping, and PBR rendering.

Three.js Lights & Shadows — Complete Guide to Lighting Strategies and Shadow Maps

Master Three.js lighting: ambient, directional, point, spot, hemisphere lights explained, shadow maps, PCFSoftShadowMap, shadow optimization, and 3-point lighting strategies for professional 3D scenes.

Three.js Animation Explained — Complete Guide to requestAnimationFrame, Clocks, Easing & Tweening

Master Three.js animation: requestAnimationFrame loop, THREE.Clock delta time, easing functions, TWEEN.js and GSAP tweening, Math.sin oscillation, pausing/resuming, and building an interactive Animation Explorer.

Three.js Cameras & Controls — Complete Guide to Every Camera Type and Control Scheme

Master Three.js cameras: PerspectiveCamera vs OrthographicCamera explained, OrbitControls, FlyControls, multi-viewport setups, camera transitions, and interactive Camera Studio project.

Three.js 3D Models Loading — Complete Guide to GLTF, GLB, OBJ, FBX & Draco Compression

Learn Three.js model loading: GLTF/GLB format explained, DRACOLoader setup, OBJ/MTL loading, FBX animation support, LoadingManager progress bars, model optimization, and complete 3D viewer project.

Three.js Particles & Particle Systems — Complete Guide to Points, Sprites, Physics & Effects

Master Three.js particle effects: Points + PointsMaterial, BufferGeometry attributes, per-particle colors/sizes, canvas textures, physics (gravity, wind, attractors), rain/snow/fire effects, and interactive galaxy generator.

Three.js Post-Processing & Effects — Complete Guide to Bloom, Film Grain, Glitch & Custom Shaders

Master Three.js post-processing: EffectComposer pipeline, RenderPass, UnrealBloomPass, FilmPass, GlitchPass, SSAO, SSR, custom ShaderPass effects, color grading, and performance optimization.

Three.js Interactivity & UI — Complete Guide to Raycasting, Drag-and-Drop, Labels & Click Detection

Master Three.js interactivity: Raycaster for mouse picking, hover effects, DragControls, TransformControls, CSS2DRenderer labels, HTML overlays, click detection, and building interactive 3D applications.

Three.js Scene Graph — Parent-Child Hierarchy and Object Management

Learn Three.js scene graph hierarchy: how parent-child transforms work, adding and removing children, traversing the scene, and managing complex object trees in 3D.

Three.js Advanced Materials — PBR, Textures, Environment Maps

Master Three.js advanced materials: physically-based rendering, diffuse/specular/normal/roughness maps, environment maps, mesh physical material, and custom material properties.

Three.js Shaders GLSL — Vertex and Fragment Shader Programming

Learn Three.js GLSL shaders: write vertex and fragment shaders, pass uniforms and attributes, create custom materials with ShaderMaterial, and build real-time visual effects.

Three.js ShaderMaterial — Custom Shader Effects and Techniques

Learn Three.js ShaderMaterial techniques: custom shader effects, uniforms animation, vertex displacement, fragment color blending, and combining shaders with Three.js built-in lights.

Three.js Raycaster — Mouse Picking and Intersection Detection

Learn Three.js raycaster for mouse picking: cast rays from camera, detect mesh intersections, handle click and hover events, and build interactive 3D selection systems.

Three.js Physics — Adding Physics Engines (Cannon-es, Ammo.js)

Learn Three.js physics integration: add gravity, collision detection, and rigid body dynamics using Cannon-es and Ammo.js for realistic 3D simulations.

Three.js Audio — Positional and Directional Sound in 3D

Learn Three.js audio: create positional audio sources, directional cones, stereo panners, and spatialized soundscapes that respond to listener position and orientation.

Three.js VR and AR — WebXR Immersive Experiences

Learn Three.js VR and AR development with WebXR: set up immersive sessions, handle controllers, render stereoscopic views, and build cross-platform XR applications.

Three.js Performance Optimization — Rendering Tips and Best Practices

Learn Three.js performance optimization: draw call reduction, instancing, LOD, frustum culling, geometry merging, texture atlasing, and profiling tools for smooth 60fps.

Three.js Exporting — Saving Scenes to glTF, OBJ, and STL

Learn Three.js exporting: export scenes and models to glTF, OBJ, STL formats using GLTFExporter, save to disk, and integrate export functionality into 3D web applications.

Three.js Loading Manager — Asset Loading and Progress Tracking

Learn Three.js LoadingManager: track texture, model, and audio loading progress, handle loading errors, show progress bars, and manage complex asset pipelines.

Three.js Sprites — Billboard Images and Labels

Learn Three.js sprites: create billboard textures, sprite materials, 2D labels in 3D scenes, sprite sheets, and always-facing-camera image overlays.

Three.js Lines — Drawing Lines, Polylines, and Line Segments

Learn Three.js lines: create lines from points, draw polylines, use LineBasicMaterial and LineDashedMaterial, render line segments, and implement wireframe effects.

Three.js Bones and Skinning — Skeletal Animation

Learn Three.js bones and skinning: create skeleton hierarchies, bind meshes to bones, animate poses with keyframes, and export skinned animations from Blender.

Three.js Project — Build a 3D Solar System Explorer

Build a complete Three.js solar system explorer project: orbital mechanics, scene graph hierarchies, PBR materials, lighting, animation, raycaster interaction, and performance optimization.