Three.js Guides
Three.js Grass: How to Render a Grass Field
How to render a grass field in Three.js: the instanced-mesh technique everyone actually uses, adding wind sway in a shader, and how to keep it fast at scale.
Three.js Water: How to Render Realistic Water
How to render water in Three.js: animated wave normals, screen-space reflection and refraction, and the tradeoffs between the built-in Water class and a custom TSL shader.
Three.js Lighting: A Practical Guide
Three.js lighting explained: the light types, when to use each, how to set up a believable three-point rig, and how to get shadows working correctly.
Three.js Materials: Which One Should You Use?
Three.js materials compared: MeshStandardMaterial vs MeshPhysicalMaterial vs MeshBasicMaterial vs ShaderMaterial, and how to write custom materials with TSL.
Three.js OrbitControls: Setup, Options & Alternatives
How to set up OrbitControls in Three.js, the options that matter (damping, limits, auto-rotate), and when to reach for a different controls class instead.
Three.js GLTFLoader: Loading 3D Models the Right Way
How to load glTF/GLB models in Three.js with GLTFLoader, enable Draco compression, and export clean glTF files from Blender.
Three.js Raycaster: Click and Hover Detection
How to use THREE.Raycaster for click and hover detection in Three.js: converting mouse coordinates, intersecting objects, and performance tips for large scenes.
Three.js Shadows: Setup and Fixing Common Problems
How to enable shadows in Three.js, choose a shadow map type, tune shadow camera frustums, and fix the most common shadow bugs like acne and peter-panning.
Three.js Camera: PerspectiveCamera vs OrthographicCamera
Three.js cameras explained: PerspectiveCamera vs OrthographicCamera, how field of view and aspect ratio work, and how to keep a camera correct on window resize.
Three.js Physics: Cannon.js vs Rapier vs Ammo.js
Adding physics to a Three.js scene: Three.js has no built-in physics engine, so this guide compares Cannon.js, Rapier and Ammo.js and shows how to sync a physics body to a mesh.
Three.js Animation: AnimationMixer, Tweening & GSAP
Three.js animation explained: playing glTF skeletal animations with AnimationMixer, simple property tweening, and when to reach for GSAP instead.
Three.js Particles: Points, Sprites & GPU Compute
How to build particle effects in Three.js with THREE.Points, when to use sprites instead, and how WebGPU compute shaders scale particle counts far higher.
Three.js Sky, Clouds and Fog
How to add a sky to a Three.js scene: skybox vs procedural sky shader, layered cloud techniques, and using fog for depth and atmosphere.
Three.js Globe: Building an Interactive 3D Earth
How to build an interactive Three.js globe: base sphere and texture setup, plotting data points by latitude/longitude, and animated connection arcs.
Three.js Text: 3D Text, SDF Text & troika-three-text
How to render text in Three.js: extruded 3D TextGeometry vs crisp SDF text with troika-three-text, and when to just use HTML overlays instead.
Three.js Textures: Loading, Compression & Performance
How to load and optimize textures in Three.js: TextureLoader basics, wrapping and filtering, and using KTX2/Basis compression for faster loads.
Three.js with TypeScript: Setup and Common Gotchas
Using Three.js with TypeScript: installing types, typing custom shader uniforms and node materials, and the most common type errors and how to fix them.
Three.js Scene and Renderer: The Setup Every Project Starts With
The Three.js Scene, Renderer and render loop explained: what each piece does, common renderer options, and the resize/cleanup patterns every project needs.
Three.js UI and HUD: In-Scene vs HTML Overlay
Building UI and HUD elements for a Three.js scene: when an HTML overlay is the right call vs true in-scene UI, and the world-to-screen projection math either way.
Three.js Maps: 3D Terrain and Map Visualization
Building 3D maps and terrain in Three.js: heightmap-driven terrain meshes, tile-based large maps, and layering real geographic data on top.
Three.js Image Gallery: 3D Photo Walls and Scroll Galleries
How to build a 3D image gallery in Three.js: a plane-per-image grid, scroll-driven camera movement, and texture loading strategy for many images.