Skip to content

Three.js

Three.js is a cross-browser JavaScript library and API used to create and display animated 3D computer graphics in a web browser using WebGL. It provides a high-level abstraction over WebGL, making 3D development accessible.

Pages in this section

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.

✓ Live

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.

✓ Live

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.

✓ Live

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.

✓ Live

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.

✓ Live

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.

✓ Live

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.

✓ Live

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.

✓ Live

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.

✓ Live