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.
✓ LiveThree.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.
✓ LiveThree.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.
✓ LiveThree.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.
✓ LiveThree.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.
✓ LiveThree.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.
✓ LiveThree.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.
✓ LiveThree.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.
✓ LiveThree.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